Ẩn hình ảnh src trong phần tử <img>, nhưng hiển thị hình nền của nó

Tôi có phần tử hình ảnh mà tôi đã thêm hình nền khác bằng cách sử dụng CSS.Ẩn hình ảnh src trong phần tử <img>, nhưng hiển thị hình nền của nó

img { 
 
    background-image: url('http://i.stack.imgur.com/5eiS4.png') !important; 
 
}

<img src="http://i.stack.imgur.com/smHPA.png" />

Tôi muốn hiển thị hình nền CSS-định (the Stack Exchange logo) trong các yếu tố hình ảnh, thay vì hình ảnh theo quy định của src thuộc tính (the Stack Overflow logo).

Điều này có khả thi không? Tôi có một tình huống mà tôi không thể thay đổi HTML hoặc sử dụng JavaScript và đang tìm kiếm các lựa chọn thay thế.

Nguồn

2013-08-28 lrtad

-1

Không sử dụng hình ảnh. Sử dụng div 's với hình nền

<img> là thẻ HTML. CSS là có thêm phong cách cho nó, không phải để thay đổi các thuộc tính của nó. Dưới đây được đề cập là một cách giải quyết khác. Tôi sẽ không khuyên bạn nên mặc dù nó. Không phải là một cách tiếp cận rất sạch sẽ.

Sample Code:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Untitled Document</title> 
     <style type="text/css"> 
      .style2{background:url('bg.jpg') 0 0 repeat !important;} 
     </style> 
    </head> 
    <body> 
     <div style="background:url(img.png) 0 0; width:728px; height:90px;" class="style2" /> 
    </body> 
</html>

Nguồn

2013-08-28 07:29:40

Lưu ý rằng 4 khoảng trắng hàng đầu giúp văn bản của bạn được định dạng dưới dạng mã. Xóa chúng để văn bản của bạn được hiển thị dưới dạng văn bản và không được định dạng dưới dạng nguồn HTML. – Artemix

này là không thể ở mọi trình duyệt, nhưng trong WebKit và các trình duyệt Blink (như Safari và Chrome) nó có thể được thực hiện bằng cách sử dụng content tài sản để thay thế src - nội dung hình ảnh được chỉ định của phần tử <img>. Sử dụng content: none để xóa hoàn toàn nó có vẻ không hoạt động, nhưng chúng tôi có thể thay thế bằng GIF trong suốt để đạt được hiệu quả tương tự.

Điều này sẽ thay đổi kích thước bên trong của hình ảnh (thành 1x1 trong trường hợp này), vì vậy bạn cũng cần thêm rõ ràng width và height nếu chúng chưa được chỉ định.

img { 
 
    content: url('data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); 
 
    width: 32px; 
 
    height: 36px; 
 
    background-image: url('http://i.stack.imgur.com/5eiS4.png'); 
 
}

<img src="http://i.stack.imgur.com/smHPA.png" />

Nguồn

2013-08-28 07:35:53

tác phẩm này trên chrome, nhưng không có trong firefox và tức là – lrtad

Mẹo hay. rất hữu ích cho chrome và safari. –

@ lrtad Tôi nhớ đọc ở đâu đó rằng thuộc tính 'content' chỉ hợp lệ đối với các phần tử giả' :: before' và ':: after', theo thông số kỹ thuật CSS3. –

The object-position CSS property, được hỗ trợ bởi cả Chrome và Firefox, cung cấp một giải pháp khá trực tiếp đến vấn đề này. Thuộc tính này được sử dụng để bù đắp vị trí hiển thị của hình ảnh gốc trong phần tử của nó. Đặc điểm kỹ thuật hữu ích lưu ý rằng ...

Các khu vực của hộp không nằm trong phần tử thay thế sẽ hiển thị nền của phần tử.

... miễn là chúng tôi cung cấp bù đắp để đảm bảo hình ảnh gốc hoàn toàn nằm ngoài giới hạn, nền sẽ hiển thị thay thế. Ví dụ:

img { 
 
    object-position: -99999px 99999px; 
 
    background-image: url('http://i.stack.imgur.com/5eiS4.png'); 
 
}

<img src="http://i.stack.imgur.com/smHPA.png" />

Nguồn

2016-05-09 20:21:25

Điều này cũng hoạt động đối với các phần tử 'video'. –

Cũng được hỗ trợ bởi Opera (bắt đầu từ v11.6 đến v19), không được hỗ trợ bởi IE hoặc Safari. – Shaggy

Tôi không bao giờ biết về 'đối tượng vị trí' cảm ơn! –

Tôi tìm thấy một giải pháp mà làm việc trong tất cả các trình duyệt chính (thử nghiệm trong IE8 +) cố gắng với brute force.

img { 
 
    background-image: url('http://i.stack.imgur.com/5eiS4.png') !important; 
 
    position: relative; 
 
    overflow: hidden; 
 
    width: 32px; 
 
    height: 36px; 
 
    padding: 32px 36px 0 0; 
 
    box-sizing: border-box; 
 
}

<img src="http://i.stack.imgur.com/smHPA.png"/>

Nó có một số thủ thuật. Bạn phải cung cấp chiều rộng và chiều cao thực tế của hình ảnh dưới dạng chiều rộng và chiều cao.Sau đó thiết lập padding trái và trên cùng với chiều rộng và chiều cao tương ứng. Tôi không biết nếu tràn có liên quan nhưng chỉ cần thêm nó. Hộp kích thước phải là hộp biên giới.

Chỉnh sửa: Giải pháp tối thiểu hơn. Một trong số padding-left hoặc padding-top là đủ và không cần overflow:hidden. Fiddle với nó.

Nguồn

2016-05-11 07:47:03

Tôi khuyên bạn nên chỉ định thuộc tính 'height' &' width' trực tiếp trong thẻ 'img'. Điều này sẽ yêu cầu thêm 'overflow: hidden' một lần nữa. Ngoài ra, trong trường hợp hình ảnh được sử dụng cho nền nhỏ hơn hình ảnh thực tế, có thể là một ý tưởng để đặt thuộc tính 'background-position' và' background-repeat'. – Shaggy

này nên làm việc

Bạn hình ảnh ở đây

<img src="http://i.stack.imgur.com/smHPA.png" />

giả sử chiều cao của nó là 100px và chiều rộng là 200px

sau đó stylesheet css của bạn nên được như thế này một

img{ 
    display: block; 
    -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    width:200px; 
    height:100px; 
    padding-left:200px; 
    background:url('http://i.stack.imgur.com/5eiS4.png') no-repeat; 
    }

cơ bản những gì bạn phải làm, chỉ cần chèn cửa hộp bất động sản đầu tiên và sau đó cung cấp padding trái bằng chiều rộng của hình ảnh

Nguồn

2016-05-13 05:55:46

chắc chắn rằng "nội dung" img là kích thước tương tự như img bạn đang che đậy. Điều này hoạt động tốt hơn so với sử dụng hình nền để che hình ảnh tiền cảnh.

div.image:before { 
    position:absolute; 
    content:url(http://placehold.it/350x150); 
}

tín dụng bài này từ một vài năm trở lại https://stackoverflow.com/a/10833692/3247527

Nguồn

2016-05-14 00:07:54 TechTho

Bạn không thể thay đổi HTML nhưng bạn có thể thay thế hình ảnh ! Mở Photoshop và tạo một hình ảnh trong suốt 100% có cùng tên với nguồn và đặt nó vào cùng thư mục chứa ảnh hiện tại.

Điều gì sẽ xảy ra ở đây? Thẻ hình ảnh sẽ chiếm không gian vì kích thước hình ảnh trong suốt và hình nền sẽ hiển thị :)

Nguồn

2016-05-14 14:07:09 theHarsh

Ẩn hình ảnh src trong phần tử <img>, nhưng hiển thị hình nền của nó

Trả lời

Các vấn đề liên quan