Có một tiền cảnh tương đương với background-image trong css không?

Question

Tôi muốn thêm một số phần sáng vào phần tử trên trang web. Tôi thích nếu tôi không phải thêm html bổ sung vào trang. Tôi muốn hình ảnh xuất hiện trước phần tử chứ không phải đằng sau. Cách tốt nhất để làm điều này là gì?

Answer 1

Để đạt được một "hình ảnh cận cảnh" mà không thêm mã HTML, bạn có thể sử dụng một pseudo-yếu tố (::before/:before) cộng với CSS pointer-events. Thuộc tính cuối cùng là cần thiết để người dùng thực sự có thể nhấp qua lớp "như thể nó không tồn tại".

Dưới đây là một ví dụ (sử dụng một màu có kênh alpha là 50% để bạn có thể thấy rằng các yếu tố thực thực sự có thể được tập trung): http://jsfiddle.net/JxNdT/

​<div id="cont"> 
Test<br> 
<input type="text" placeholder="edit"> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

​#cont { 
    width: 200px; 
    height: 200px; 
    border: 1px solid #aaa; /*To show the boundaries of the element*/ 
} 
#cont:before { 
    position: absolute; 
    content: ''; 
    background: rgba(0,0,0, 0.5); /*partially transparent image*/ 
    width: 200px; 
    height: 200px; 
    pointer-events: none; 
} 
​ 

PS. Tôi đã chọn phần tử giả ::before, vì điều đó tự nhiên dẫn đến vị trí chính xác. Nếu tôi chọn ::after, thì tôi phải thêm position:relative; vào phần tử thực (#cont) và top:0;left:0; vào phần tử giả (::after).

---

PPS. Để có được hiệu ứng nền trước trên các phần tử không có kích thước cố định, cần thêm phần tử bổ sung. Phần tử trình bao này yêu cầu kiểu dáng position:relative;display:inline-block;. Đặt width và height của phần tử giả thành 100% và phần tử giả sẽ kéo dài đến chiều rộng và chiều cao của phần tử trình bao bọc. Bản trình diễn: http://jsfiddle.net/JxNdT/1/.

Answer 2

Bạn có thể sử dụng css này

#yourImage 
{ 
z-index: 1; 
} 

LƯU Ý

Đặt z-index để chỉ số càng lớn thì các z-index của phần tử trên mà bạn đang đặt hình ảnh.

Nếu bạn chưa chỉ định bất kỳ z-index thì 1 sẽ thực hiện công việc.

Bạn cũng có thể đặt z-index thành -1, trong trường hợp đó, hình ảnh sẽ luôn ở background!

Answer 3

Nếu bạn cần một màu trắng trong suốt foreground

này là dành cho du khách trong tương lai như tôi những người đang cân nhắc thêm một foreground trắng trong suốt đối với một yếu tố để giao tiếp mà nó ẩn/tắt ví dụ. Bạn thường có thể đạt được mục tiêu của mình bằng cách đơn giản giảm opacity dưới 1:

.is-hidden { 
 
    opacity: 0.5; 
 
}

visible 
 
<span class="is-hidden">hidden</span> 
 
visible