Câu hỏi Sử dụng: trước phần tử CSS giả để thêm hình ảnh vào phương thức


Tôi có một lớp CSS Modal đó là hoàn toàn vị trí, z-indexed trên đó là cha mẹ, và vị trí độc đáo với JQuery. Tôi muốn thêm hình ảnh dấu mũ (^) vào đầu hộp phương thức và đang xem xét sử dụng :before Bộ chọn CSS giả để làm điều này một cách rõ ràng.

Hình ảnh cần được định vị hoàn toàn và được lập chỉ mục z ở trên phương thức, nhưng tôi chưa tìm thấy bất kỳ cách nào để thêm lớp thích hợp vào hình ảnh trong content thuộc tính:

.Modal:before{
  content:url('blackCarrot.png') /* with class ModalCarrot ??*/
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

Tùy chọn thứ hai tốt nhất-tôi có thể thêm kiểu nội tuyến trong thuộc tính nội dung không?


76
2017-07-12 17:40


gốc


Bạn cần phải ngừng gọi nó là "cà rốt". - thirtydot
@thirtydot Đó là vấn đề với các ngôn ngữ không cuộn Rs ^ _ ^ - Petruza


Các câu trả lời:


http://caniuse.com/#search=:after

:after và :before với content được sử dụng khi chúng được hỗ trợ trong mọi trình duyệt chính khác ngoài Internet Explorer ít nhất 5 phiên bản trở lại. Internet Explorer có hỗ trợ đầy đủ trong phiên bản 9+ và hỗ trợ một phần trong phiên bản 8.

Đây có phải là những gì bạn đang tìm kiếm không?

.Modal:after{
  content:url('blackCarrot.png'); /* with class ModalCarrot ??*/
  position:relative; /*or absolute*/
  z-index:100000; /*a number that's more than the modal box*/
  left:-50px;
  top:10px;
}

.ModalCarrot{
   position:absolute;
   left:50%;
   margin-left:-8px;
   top:-16px;
}

Nếu không, bạn có thể giải thích tốt hơn một chút không?

hoặc bạn có thể sử dụng jQuery, như Joshua đã nói:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");


129
2017-07-25 09:51



Điều này. Điểm của Joshua về khả năng tương thích với trình duyệt cũng đúng mặc dù IE8 hiển thị hình ảnh trong nội dung: sau khi nội dung, nhưng sẽ không hiển thị các phần của nó nằm ngoài biên giới của cha mẹ. - RSG
Bây giờ (trong năm 2017), IE 11 là phiên bản duy nhất của IE vẫn được hỗ trợ bởi Microsoft; vì vậy, không có nhiều điểm đáng lo ngại về tính tương thích của IE8. Ngoài ra, giải pháp CSS hầu như luôn tốt hơn giải pháp jQuery vì chúng có xu hướng tải nhanh hơn nhiều và jQuery có thể gây ra hiện tượng nhấp nháy màn hình bằng cách viết lại bố cục của bạn sau khi trang được tải. - Nosajimiki
@Nosajimiki có hay không bạn nên lo lắng về các trình duyệt cũ hơn phụ thuộc chủ yếu vào khách truy cập của bạn. - Jose Faeti


Bạn nên sử dụng thuộc tính background để đưa một hình ảnh cho phần tử đó, và tôi sẽ sử dụng :: sau thay vì trước đây, theo cách này nó phải được vẽ trên đầu phần tử của bạn.

.Modal:before{
  content: '';
  background:url('blackCarrot.png');
  width: /* width of the image */;
  height: /* height of the image */;
  display: block;
}

21
2017-07-12 17:46



Cảm ơn đề xuất - phương thức có đường viền nên tôi không nghĩ tôi có thể sử dụng hình nền để định vị hình ảnh củ cà rốt phía trên đường viền / màu bg khi cần. - RSG
Tại sao không? nếu bạn hoàn toàn định vị phần tử giả đó, bạn có thể di chuyển nó xung quanh với lề. Nó sẽ được vẽ trên đầu các phần tử biên giới khác và / hoặc màu bg. - Jose Faeti
Hình nền không thể mở rộng ra ngoài biên giới của div? - RSG
Bạn có thể cần thêm nội dung: ''; điều này để làm cho nó xuất hiện - Willster


1. đây là câu trả lời của tôi cho vấn đề của bạn.

.ModalCarrot::before {
content:'';
background: ('blackCarrot.png');/*url of image*/
height: 16px;/*height of image*/
width: 33px;/*width of image*/
position: absolute;
}

10
2017-07-22 17:16



Tôi đã thêm background-size: 33px 16px; background-repeat: no-repeat; để chia tỷ lệ hình ảnh! - Hasse Björk


Nội dung và trước cả hai đều không đáng tin cậy trên các trình duyệt. Tôi sẽ đề nghị gắn bó với jQuery để thực hiện điều này. Tôi không chắc chắn những gì bạn đang làm để tìm ra nếu cà rốt này cần phải được thêm vào hay không, nhưng bạn sẽ nhận được ý tưởng tổng thể:

$(".Modal").before("<img src='blackCarrot.png' class='ModalCarrot' />");

-4
2017-07-12 17:48



Điều này làm cho tôi buồn. Chúng tôi đã có một bộ các trình duyệt được nhắm mục tiêu một cách thương xót, vì vậy tôi vẫn quan tâm đến những gì có thể với CSS. - RSG
Ngay cả với nội dung được sử dụng nhiều trong CSS3, từ những gì tôi đã thấy, nó vẫn là một trong những thứ không được hỗ trợ đầy đủ ở bất cứ đâu. Tôi tin rằng điều này phải làm với một số sợ hãi của việc có thể tiêm những điều xấu xa. Ngoài ra, tôi tin rằng nội dung cần một phần tử đã có để chèn vào - không chắc chắn liệu tôi có thể thao tác DOM nhiều như vậy không. - Joshua
Câu trả lời này sai về việc có hỗ trợ không đáng tin cậy trên các trình duyệt. Content và after/before rất đáng tin cậy trên mọi trình duyệt chính, nó hoạt động từ ie8, ít nhất là FF3.5, ít nhất là Chrome 9, ít nhất là Opera 10.6, ít nhất là Safari 3.2, mọi phiên bản của iOS Safari, mọi phiên bản của Opera mini, mọi phiên bản Opera Mobile và bao giờ là phiên bản của trình duyệt Android. nếu bạn muốn biết nếu một cái gì đó được hỗ trợ qua trình duyệt, hãy kiểm tra: caniuse.com/#search=:after - android.nick
Chỉ vì internet nói nó là, không có nghĩa là nó là sự thật. Làm việc với họ, họ hành động khác nhau trong mọi trình duyệt. Và IE 7 vẫn là một trình duyệt rất phổ biến, không hỗ trợ cả hai. - Joshua
Trên thực tế, bạn tốt hơn với CSS kết thúc JavaScript trên cái này Không có vấn đề làm thế nào chảy máu cạnh trình duyệt, người dùng vẫn có thể có JavaScript tàn tật ... May mắn thay trong trường hợp này :before và :after bộ chọn được hỗ trợ rộng rãi; quirksmode.org/css/selectors - Steve Buzonas