Có thể đặt tương đương với thuộc tính src của thẻ img trong CSS không?


532

Có thể đặt srcgiá trị thuộc tính trong CSS không? Hiện tại, những gì tôi đang làm là:

<img src="pathTo/myImage.jpg"/>

và tôi muốn nó là một cái gì đó như thế này

<img class="myClass" />
.myClass {
    some-src-property: url("pathTo/myImage.jpg");

Tôi muốn làm điều này mà không sử dụng các thuộc tính backgroundhoặc background-image:trong CSS.


1
Đây rõ ràng sẽ là có thể trong CSS3: w3.org/TR/css3-values/#attribute
graphicdivine

7
Bây giờ có thể. Đã thử nghiệm trên Chrome / Safari / Opera: stackoverflow.com/a/11484688/632951
Pacerier

2
Nhưng FireFox 30.0, Internet Explorer 11.0 không hỗ trợ
Laxmikant Dange

Giải pháp chỉ CSS này hoạt động với tôi (trong tất cả các trình duyệt): stackoverflow.com/a/19114098/448816 , ngoại trừ tôi phải thêm: 'kích thước nền: 100%;'.
mikhail-t

(2020) Bạn có thể làm điều đó với JS getPropertyValue("--src")xem: jsfiddle.net/CustomElementsExamples/vjfpu3a2
Danny '365CSI' Engelman

Câu trả lời:


881

Sử dụng content:url("image.jpg").

Giải pháp làm việc đầy đủ ( Live Demo):

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>

Đã thử nghiệm và làm việc:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

Đã thử nghiệm và không hoạt động:

  • FireFox 40.0.2 (quan sát Công cụ mạng của nhà phát triển, bạn có thể thấy rằng URL tải, nhưng hình ảnh không được hiển thị)
  • Internet Explorer 11.0.9600.17905 (URL không bao giờ tải)

7
@gotqn, chỉ Chrome Chrome Opera cho đến nay.
Pacerier

36
@EricG, các ứng dụng khác nhau có các yêu cầu khác nhau. Nếu nó không phù hợp với yêu cầu của bạn, đừng sử dụng nó. Nếu có, sử dụng nó.
Pacerier

4
Không hoạt động IE10 là không có. Chúng tôi bỏ IE7 (chúng ta đừng nói về IE6). IE8 cũng vậy, nếu cần. Nhưng IE9 - IE10 ... không.
Rolf

11
Worth thêm rằng thậm chí trong các trình duyệt hỗ trợ gán contentcho img, nó thay đổi hành vi của nó. Hình ảnh bắt đầu bỏ qua các thuộc tính kích thước và trong Chrome / Safari, nó sẽ mất các tùy chọn menu ngữ cảnh như 'Lưu hình ảnh'. Điều này là do việc gán một contentchuyển đổi hiệu quả imgtừ phần tử thay thế trống sang một cái gì đó như <span><img></span>.
Ilya Streltsyn

3
không có hỗ trợ trình duyệt phù hợp Tôi không thấy đây là một câu trả lời hợp lệ, xin lỗi.
emachine

183

Có một giải pháp mà tôi đã tìm ra ngày hôm nay (hoạt động trong IE6 +, FF, Opera, Chrome):

<img src='willbehidden.png' 
 style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">

Làm thế nào nó hoạt động:

  • Hình ảnh được thu nhỏ cho đến khi không còn hiển thị theo chiều rộng và chiều cao.
  • Sau đó, bạn cần 'đặt lại' kích thước hình ảnh bằng phần đệm. Cái này cho hình ảnh 16x16. Tất nhiên bạn có thể sử dụng padding-left / padding-top để tạo hình ảnh hình chữ nhật.
  • Cuối cùng, hình ảnh mới được đặt ở đó bằng cách sử dụng nền.
  • Nếu hình nền mới quá lớn hoặc quá nhỏ, tôi khuyên bạn nên sử dụng background-sizeví dụ: background-size:cover;phù hợp với hình ảnh của bạn vào không gian được phân bổ.

Nó cũng hoạt động để gửi hình ảnh đầu vào, chúng có thể nhấp.

Xem bản demo trực tiếp: http://www.audenaerde.org/csstricks.html#imagereplacecss

Thưởng thức!


6
@RobAnu: Điều này hoạt động khá tốt - jsfiddle
TimPietrusky

9
Phải trao cho bạn rằng điều này thật hấp dẫn và thông minh, nhưng một DIV trống rỗng thì thẳng thắn hơn.
Volomike

11
Trong trường hợp này là nó. Tuy nhiên, có một số trường hợp bạn không thể kiểm soát HTML và muốn thao tác với IMG. Có giải pháp này cũng sẽ hoạt động
RobAu

2
Nếu hình ảnh có srcthuộc tính, đây là kỹ thuật bạn cần. +1 - đã giúp tôi rất nhiều
James Long

3
Không xếp hạng cho câu trả lời này, có thể là giải pháp cho một số ứng dụng, nhưng phương pháp này có một hạn chế. Bạn không có quyền kiểm soát kích thước hiển thị của tệp hình ảnh. Trong sử dụng bình thường, bạn có thể kiểm soát chiều rộng chiều cao của hình ảnh, nếu tệp được chỉ định trong nguồn. Nhưng điều này về cơ bản không khác gì một div với hình nền, trong đó nếu div của bạn lớn hơn hình ảnh, bạn sẽ không gặp may.
TARKUS

113

Một tập hợp các phương thức có thể để đặt hình ảnh từ CSS


:afterPhần tử giả của CSS2 hoặc cú pháp mới hơn::after từ CSS3 cùng với thuộc content:tính:

Khuyến nghị đầu tiên của W3C: Bảng kiểu xếp tầng, Đặc tả CSS2 cấp 2 ngày 12 tháng 5 năm 1998
Khuyến nghị mới nhất của W3C: Bộ chọn Khuyến nghị W3C cấp 3 29 tháng 9 năm 2011

Phương pháp này nối thêm nội dung ngay sau nội dung cây tài liệu.

Lưu ý: một số trình duyệt thử nghiệm hiển thị thuộc contenttính trực tiếp trên một số bộ chọn thành phần bất chấp đề xuất W3C mới nhất xác định:

Áp dụng cho: :before:aftercác yếu tố giả

Cú pháp CSS2 (tương thích về phía trước):

.myClass:after {
  content: url("somepicture.jpg");
}

Bộ chọn CSS3:

.myClass::after {
  content: url("somepicture.jpg");
}

Kết xuất mặc định: Kích thước gốc (không phụ thuộc vào khai báo kích thước rõ ràng)

Thông số kỹ thuật này không xác định đầy đủ sự tương tác của: trước và: sau với các yếu tố được thay thế (chẳng hạn như IMG trong HTML). Điều này sẽ được xác định chi tiết hơn trong một đặc điểm kỹ thuật trong tương lai.

nhưng ngay cả tại thời điểm viết bài này, hành vi với <IMG>thẻ vẫn chưa được xác định và mặc dù nó có thể được sử dụng theo cách bị hack và không tuân thủ tiêu chuẩn , không nên sử dụng với<img> !

Phương pháp ứng cử viên tuyệt vời, xem kết luận ...



CSS1 'sbackground-image:Thuộc tính :

Khuyến nghị đầu tiên của W3C: Bảng kiểu xếp tầng, cấp 1 ngày 17 tháng 12 năm 1996

Thuộc tính này đặt hình nền của một phần tử. Khi đặt hình nền, người ta cũng nên đặt màu nền sẽ được sử dụng khi hình ảnh không có sẵn. Khi hình ảnh có sẵn, nó được phủ lên trên cùng của màu nền.

Thuộc tính này đã có từ đầu CSS và tuy nhiên nó xứng đáng được đề cập đến.

Kết xuất mặc định: Kích thước gốc (không thể thu nhỏ, chỉ định vị)

Tuy nhiên ,

background-size:Thuộc tính của CSS3 đã cải thiện nó bằng cách cho phép nhiều tùy chọn chia tỷ lệ:

Trạng thái W3C mới nhất: Mô-đun CSS và Biên giới đề xuất của ứng viên Cấp 3 ngày 9 tháng 9 năm 2014

[length> | <percentage> | auto ]{1,2} | cover | contain

Nhưng ngay cả với tài sản này, nó phụ thuộc vào kích thước container.

Vẫn là một phương pháp ứng cử viên tốt, xem kết luận ...



list-style:Thuộc tính của CSS2 cùng vớidisplay: list-item :

Khuyến nghị đầu tiên của W3C: Bảng kiểu xếp tầng, Đặc tả CSS2 cấp 2 ngày 12 tháng 5 năm 1998

list-style-image: thuộc tính đặt hình ảnh sẽ được sử dụng làm điểm đánh dấu mục danh sách (dấu đầu dòng)

Các thuộc tính danh sách mô tả định dạng trực quan cơ bản của danh sách: chúng cho phép các biểu định kiểu chỉ định loại điểm đánh dấu ( hình ảnh , glyph hoặc số)

display: list-item- Giá trị này làm cho một phần tử (ví dụ: <li>trong HTML) tạo hộp khối chính và hộp đánh dấu.

.myClass {
    display: list-item;
    list-style-position: inside;
    list-style-image: url("someimage.jpg");
}

Viết tắt CSS: ( <list-style-type> <list-style-position> <list-style-image>)

.myClass {
    display: list-item;
    list-style: square inside url("someimage.jpg");
}

Kết xuất mặc định: Kích thước gốc (không phụ thuộc vào khai báo kích thước rõ ràng)

Những hạn chế:

  • Kế thừa sẽ chuyển các giá trị 'kiểu danh sách' từ các phần tử OL và UL sang các phần tử LI. Đây là cách được đề xuất để xác định thông tin kiểu danh sách.

  • Họ không cho phép tác giả chỉ định phong cách riêng biệt (màu sắc, phông chữ, căn chỉnh , v.v.) cho điểm đánh dấu danh sách hoặc điều chỉnh vị trí của nó

Phương pháp này cũng không phù hợp với <img>thẻ vì chuyển đổi không thể được thực hiện giữa các loại phần tử và đây là bản hack không tuân thủ giới hạn, không hoạt động trên Chrome.

Phương pháp ứng viên tốt, xem kết luận ...



Đề xuất thuộcborder-image: tính của CSS3 :

Trạng thái W3C mới nhất: Mô-đun CSS và Biên giới đề xuất của ứng viên Cấp 3 ngày 9 tháng 9 năm 2014

Một phương thức kiểu nền dựa vào việc chỉ định kích thước theo cách khá đặc biệt (không được xác định cho trường hợp sử dụng này) và các thuộc tính đường viền dự phòng cho đến nay (ví dụ border: solid:):

Lưu ý rằng, mặc dù chúng không bao giờ gây ra cơ chế cuộn, hình ảnh bên ngoài vẫn có thể được cắt bởi tổ tiên hoặc bởi chế độ xem.

Ví dụ này minh họa hình ảnh chỉ được sáng tác như một trang trí góc dưới bên phải :

.myClass {
    border: solid;
    border-width: 0 480px 320px 0;
    border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}

Áp dụng cho: Tất cả các thành phần, ngoại trừ các thành phần bảng bên trong khi border-collapse: collapse

Tuy nhiên nó không thể thay đổi một <img>từ khóa 's src(nhưng đây là một hack ), thay vào đó chúng ta có thể trang trí nó:

Phương pháp ứng cử viên tốt để được xem xét sau khi tuyên truyền tiêu chuẩn.



Bản thảo làm việcelement() ký hiệu của CSS3 cũng đáng được đề cập:

Lưu ý: element()Hàm chỉ tái tạo sự xuất hiện của phần tử được tham chiếu, không phải nội dung thực tế và cấu trúc của nó.

<div id="img1"></div>

<img id="pic1" src="http://i.imgur.com/uKnMvyp.jpg" class="hide" alt="wolf">
<img id="pic2" src="http://i.imgur.com/TOUfCfL.jpg" class="hide" alt="cat">

Chúng tôi sẽ sử dụng các nội dung trả lại của một trong hai hình ảnh ẩn để thay đổi hình ảnh nền trong #img1dựa trên Selector ID qua CSS:

#img1 {
    width: 480px; 
    height: 320px; 
    background: -moz-element(#pic1) no-repeat;
    background-size: 100% 100%;
}

.hide {display: none}

Lưu ý: Đây là thử nghiệm và chỉ hoạt động với -moztiền tố trong Firefox và chỉ hơn backgroundhoặc background-imagethuộc tính, cũng cần các kích thước được chỉ định.


Kết luận

  1. Bất kỳ nội dung ngữ nghĩa hoặc thông tin cấu trúc đều có trong HTML.
  2. Kiểu dáng và thông tin trình bày đi trong CSS.
  3. Đối với mục đích SEO, đừng ẩn hình ảnh có ý nghĩa trong CSS.
  4. Đồ họa nền thường bị vô hiệu hóa khi in.
  5. Thẻ tùy chỉnh có thể được sử dụng và tạo kiểu từ CSS, nhưng các phiên bản nguyên thủy của Internet Explorer không hiểu] ( IE không tạo kiểu thẻ HTML5 (với shiv) ) mà không có hướng dẫn Javascript hoặc CSS .
  6. Theo thiết kế của SPA (Ứng dụng một trang), thường kết hợp hình ảnh trong nền

Phải nói rằng, hãy khám phá các thẻ HTML phù hợp để hiển thị hình ảnh:

Các <li> tử [HTML4.01 +]

Usecase hoàn hảo của list-style-imagevớidisplay: list-item phương pháp .

Phần <li>tử, có thể trống, cho phép lưu lượng nội dung và thậm chí nó được phép bỏ qua </li>thẻ kết thúc.

Hạn chế: khó tạo kiểu ( width:hoặc float:có thể giúp)

Phần <figure>tử [HTML5 +]

Phần tử hình biểu thị một số nội dung luồng, tùy ý có chú thích, độc lập (giống như một câu hoàn chỉnh) và thường được tham chiếu dưới dạng một đơn vị từ luồng chính của tài liệu.

Phần tử hợp lệ không có nội dung, nhưng được khuyến nghị để chứa a <figcaption>.

Do đó, phần tử có thể được sử dụng để chú thích minh họa, sơ đồ, hình ảnh , danh sách mã, v.v.

Kết xuất mặc định: phần tử được căn phải, với cả phần đệm bên trái và bên phải!

Phần <object>tử [HTML4 +]

Để bao gồm hình ảnh, tác giả có thể sử dụng yếu tố ĐỐI TƯỢNG hoặc yếu tố IMG.

Các datathuộc tính được yêu cầu và có thể có một giá trị kiểu MIME như một giá trị!

<object data="data:x-image/x,"></object>

Lưu ý: một mẹo để sử dụng <object>thẻ từ CSS sẽ là đặt MimeType hợp lệ tùy chỉnhx-image/x theo sau là không có dữ liệu (giá trị không có dữ liệu sau dấu phẩy được yêu cầu, )

Kết xuất mặc định: 300 x 150px, nhưng kích thước có thể được chỉ định bằng HTML hoặc CSS.

các <SVG>thẻ

Cần một trình duyệt có khả năng SVG và có một <image>yếu tố cho hình ảnh raster

Phần <canvas>tử [HTML5 +].

Các widthgiá trị mặc định thuộc tính để 300 , và các heightgiá trị mặc định thuộc tính để 150 .

Phần <input>tử vớitype="image"

Hạn chế:

... phần tử được dự kiến ​​sẽ xuất hiện giống như nút để cho biết phần tử đó là nút.

Chrome nào theo sau và hiển thị hình vuông trống 4 x 4 pixel khi không có văn bản

Giải pháp từng phần, thiết lập value=" ":

<input type="image" id="img1" value=" ">

Đồng thời xem <picture>phần tử sắp tới trong HTML5.1 , hiện đang là bản nháp đang hoạt động .


(2020) Sử dụng các thuộc tính CSS: stackoverflow.com/questions/2182716/ từ
Danny '365CSI' Engelman

Câu trả lời tuyệt vời nhưng cho thấy sự thất bại hoàn toàn của web như là một nền tảng để cung cấp các nguyên thủy cơ bản.
serraosays

26

tôi đã sử dụng giải pháp div trống, với CSS này:

#throbber {
    background-image: url(/Content/pictures/ajax-loader.gif);
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
}

HTML:

<div id="throbber"></div>

Nếu tôi muốn hiển thị nội tuyến thì sao? Thêm "display: inline" sẽ cho kích thước div của tôi là 0x0 ...
elsurudo

1
@elsurudo Sử dụng hiển thị: chặn nội tuyến nếu bạn muốn đặt chiều rộng và chiều cao cho một thành phần nội tuyến
Erin Drumond

1
Câu trả lời hàng đầu không hoạt động với Firefox, vì vậy tôi thích câu trả lời của bạn hơn! Và nó là rõ ràng và không có hack css.
Sergey Bogdanov

Nếu bạn cần hiển thị nhiều hơn một hình ảnh, hãy nhớ rằng trường id về mặt kỹ thuật được coi là duy nhất, vì vậy sử dụng bộ chọn lớp CSS thay vì ID là lý tưởng.
mix3d

Hình ảnh loại này sẽ không được in đúng nếu bạn tắt đồ họa nền trong cài đặt in.
posfan12

14

Tôi tìm thấy một cách tốt hơn so với các giải pháp được đề xuất, nhưng nó thực sự sử dụng hình nền. Phương thức tuân thủ (không thể xác nhận cho IE6) Tín dụng: http://www.kryogenix.org/code/browser/lir/

<img src="pathTo/myImage.jpg"/>

CSS:

img[src*="pathTo/myImage.jpg"] {

    background-image: url("mynewimg.jpg"); /* lets say 20x20 */
    width: 20px;

    display:inline-block;
    padding: 20px 0 0 0;
    height: 0px !important;

    /* for IE 5.5's bad box model */
    height /**/:20px;
}

Hình ảnh cũ không được nhìn thấy và cái mới được nhìn thấy như mong đợi.


Giải pháp gọn gàng sau chỉ hoạt động cho webkit

img[src*="pathTo/myImage.jpg"] {

    /* note :) */
    content:'';
    display:inline-block;

    width: 20px;
    height: 20px;
    background-image: url("mynewimg.jpg"); /* lets say 20x20 */

}

Đây là một mẹo gọn gàng, nhưng nó có thực sự tuân thủ các tiêu chuẩn? Các trang W3C nói rằng contenttài sản chỉ áp dụng cho :before:aftergiả các lớp học. Ngoài ra, nếu bạn phải hỗ trợ IE7 hoặc sớm hơn, tôi nghĩ contenthỗ trợ là không tồn tại. Tuy nhiên, rất hấp dẫn.
jatrim

Bạn nói đúng, tôi chỉ tìm thấy một phương pháp phù hợp hơn. Cập nhật bài viết của tôi! Bây giờ bỏ phiếu cho tôi lên;) Haha.
EricG

Cách tiếp cận cập nhật chắc chắn tốt hơn so với phương pháp dựa vào nội dung. Cảm ơn đã bao gồm các liên kết ban đầu. Đó là sâu sắc. Bạn sẽ lưu ý rằng câu trả lời của @ RobAu thực sự rất giống với phiên bản cập nhật của bạn.
jatrim

1
@jatrim Tài contentsản áp dụng cho tất cả các yếu tố. http://www.w3.org/TR/css3-content/#content
XP1

13

Họ đúng. IMG là một yếu tố nội dung và CSS là về thiết kế. Nhưng, làm thế nào về khi bạn sử dụng một số yếu tố nội dung hoặc thuộc tính cho mục đích thiết kế? Tôi có IMG trên các trang web của tôi phải thay đổi nếu tôi thay đổi kiểu (CSS).

Vâng, đây là một giải pháp để xác định bản trình bày IMG (không thực sự là hình ảnh) theo phong cách CSS.

  1. tạo một gif hoặc png trong suốt 1x1.
  2. Chỉ định "src" của IMG cho hình ảnh đó.
  3. Xác định bản trình bày cuối cùng với "hình nền" theo kiểu CSS.

Nó hoạt động như một say mê :)


5
-1 Mặc dù câu trả lời của bạn không tệ, anh ấy đặc biệt đề cập rằng anh ấy không muốn sử dụngbackground*
fresskoma

1
Đây là một mánh khóe ... theo ý kiến ​​của tôi, các mánh khóe sẽ bị thay đổi bởi các trình duyệt ... và một ngày vào buổi sáng bạn sẽ thấy một địa ngục trong trang web của bạn: D :)))
Mahdi Jazini

11

Đây là một giải pháp rất tốt -> http://css-tricks.com/replace-the-image-in-an-img-with-css/

Pro (s) và Con (s):
(+) hoạt động với vector hình ảnh có chiều rộng / chiều cao tương đối (một điều mà câu trả lời của RobAu không xử lý) (+) là trình duyệt chéo (cũng hoạt động với IE8 +) (+) nó chỉ sử dụng CSS. Vì vậy, không cần phải sửa đổi img src (hoặc nếu bạn không có quyền truy cập / không muốn thay đổi thuộc tính img src đã tồn tại). (-) xin lỗi, nó không sử dụng thuộc tính css nền :)



Bây giờ, đó là giải pháp thích hợp, hoạt động với tôi trong tất cả các trình duyệt, cảm ơn !! Cũng đáng để đề cập đến tôi đã phải thêm: kích thước nền: 100%; để lớp css trong giải pháp ở trên để làm cho hình ảnh thay thế hiển thị đúng.
mikhail-t

9

Bạn có thể xác định 2 hình ảnh trong mã HTML của mình và sử dụng display: none;để quyết định hình ảnh nào sẽ hiển thị.


Tôi đã tìm kiếm rất nhiều cho một giải pháp đó là Web Responsive nhưng cũng duy trì SEO. Tôi muốn sử dụng truy vấn phương tiện trong CSS để thay đổi hình ảnh của mình tùy thuộc vào thiết bị được sử dụng, nhưng tôi muốn giữ nội dung của mình trong HTML. Khai báo nguồn trong CSS là một lộ trình tôi không muốn đi, vì vậy background-imagekhông phải là một lựa chọn. Tôi muốn imgcác thẻ cho mục đích SEO. Câu trả lời của bạn rất đơn giản, thanh lịch và giải quyết mọi rào cản của tôi! dũng cảm! Ngoài ra người dùng không phải tải xuống cả hai hình ảnh. Hơn nữa, tôi có thể thêm bất kỳ số lượng hình ảnh.
Xavier

Mỗi câu trả lời tôi đọc cho đến nay sẽ buộc tôi phải khai báo các nguồn của mình trong biểu định kiểu hoặc sử dụng CSS nội tuyến trong đánh dấu của mình. Tôi cũng không hài lòng. Mã lộn xộn!
Xavier

7

Không, bạn không thể đặt thuộc tính src hình ảnh thông qua CSS. Gần nhất bạn có thể nhận được là, như bạn nói,background hoặc background-image. Tôi không khuyên bạn nên làm điều đó vì nó sẽ hơi phi logic.

Tuy nhiên, có một giải pháp CSS3 dành cho bạn, nếu các trình duyệt bạn nhắm mục tiêu có thể sử dụng nó. Sử dụng content:url như được mô tả trong câu trả lời của Pacerier . Bạn có thể tìm thấy các giải pháp đa trình duyệt khác trong các câu trả lời khác bên dưới.


1
Tại sao bỏ phiếu xuống? câu trả lời này chính xác hơn câu trả lời được chấp nhận.
harsimranb

1
Câu trả lời tốt nhất cho đến nay: KHÔNG, bạn không thể làm điều đó với CSS.
Milche P Parent

4

Đặt một số hình ảnh trong một thùng chứa "kiểm soát" và thay đổi lớp chứa. Trong CSS, thêm quy tắc để quản lý mức độ hiển thị của hình ảnh tùy thuộc vào lớp chứa. Điều này sẽ tạo ra hiệu ứng tương tự như thay đổi img srcthuộc tính của một hình ảnh duy nhất.

HTML:

<span id="light" class="red">
    <img class="red" src="red.png" />
    <img class="yellow" src="yellow.png" />
    <img class="green" src="green.png" />
</span>

CSS:

#light         { ... }
#light         *        { display: none; }     // all images are hidden
#light.red     .red     { display: inline; }   // show red image when #light is red
#light.yellow  .yellow  { display: inline; }   // .. or yellow
#light.green   .green   { display: inline; }   // .. or green

Lưu ý rằng nó sẽ tải trước tất cả các hình ảnh, như với CSS backround-image, nhưng không giống như thay đổi img srcthông qua JS.


3

Thay đổi phương pháp

.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>

3

Một số dữ liệu tôi sẽ để lại trong HTML, nhưng tốt hơn là xác định src trong CSS:

<img alt="Test Alt text" title="Title text" class="logo">

.logo {
    content:url('../images/logo.png');
}

2

Theo như tôi biết, BẠN KHÔNG THỂ. CSS là về phong cách và src của hình ảnh là nội dung.


3
Ngày nay, hình ảnh khá thường xuyên ở đó chỉ để tạo kiểu cho trang.
Lorenzo Polidori

2
Hàm ý là có thể có sự khác biệt giữa các hình ảnh được sử dụng làm viền, hình nền, v.v. và những hình ảnh thực sự là một phần của nội dung trang tức là. sơ đồ, hình ảnh bài viết, v.v.
Rhys van der Waerden

1
BẠN CÓ THỂ, và có những trường hợp phổ biến, hợp lệ mà bạn muốn.
ryan0

2

Để nhắc lại một giải pháp trước đó và nhấn mạnh việc triển khai CSS thuần túy ở đây là câu trả lời của tôi.

Một giải pháp CSS thuần túy là cần thiết trong trường hợp bạn đang tìm nguồn cung ứng nội dung từ một trang web khác và do đó bạn không kiểm soát được HTML được phân phối. Trong trường hợp của tôi, tôi đang cố gắng xóa nhãn hiệu của nội dung nguồn được cấp phép để người được phép không phải quảng cáo cho công ty họ đang mua nội dung đó. Do đó, tôi đang gỡ bỏ logo của họ trong khi vẫn giữ mọi thứ khác. Tôi nên lưu ý rằng đây là trong hợp đồng của khách hàng của tôi để làm như vậy.

{ /* image size is 204x30 */
     width:0;
     height:0;
     padding-left:102px;
     padding-right:102px;
     padding-top:15px;
     padding-bottom:15px;
     background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}

2

Tôi biết đây là một câu hỏi thực sự cũ tuy nhiên không có câu trả lời nào cung cấp lý do chính đáng cho lý do tại sao điều này không bao giờ có thể được thực hiện. Trong khi bạn có thể "làm" những gì bạn đang tìm kiếm, bạn không thể làm điều đó một cách hợp lệ. Để có thẻ img hợp lệ, nó phải có các thuộc tính src và alt.

Vì vậy, bất kỳ câu trả lời nào đưa ra cách thực hiện điều này với thẻ img không sử dụng thuộc tính src đều thúc đẩy việc sử dụng mã không hợp lệ.

Tóm lại: những gì bạn đang tìm kiếm không thể được thực hiện một cách hợp pháp trong cấu trúc của cú pháp.

Nguồn: Trình xác nhận W3


2

Hoặc bạn có thể làm điều này mà tôi tìm thấy trên interweb thingy.

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">
.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

Vì vậy, có hiệu quả ẩn hình ảnh và đệm xuống nền. Ồ, thật là một hack nhưng nếu bạn muốn một thẻ IMG với văn bản thay thế và một nền có thể mở rộng mà không cần sử dụng JavaScript?

Trong một dự án tôi đang làm việc bây giờ tôi đã tạo ra một mẫu twig khối anh hùng

<div class="hero">
  <img class="image" src="{{ bgImageSrc }}"
       alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>

1

Nếu bạn không muốn đặt thuộc tính nền thì bạn không thể đặt thuộc tính src của hình ảnh chỉ bằng CSS.

Ngoài ra, bạn có thể sử dụng JavaScript để làm điều đó.


1

Sử dụng CSS, không thể thực hiện được. Nhưng, nếu bạn đang sử dụng JQuery, một cái gì đó như thế này sẽ thực hiện thủ thuật:

$("img.myClass").attr("src", "http://somwhere");

trên thực tế, nó có thể)) xem câu trả lời cho cùng một câu hỏi ở đây: stackoverflow.com/questions/2182716/
mẹo

1

Bạn có thể chuyển đổi nó với JS:

$('.image-class').each(function(){
    var processing = $(this).attr('src');
    $(this).parent().css({'background-image':'url('+processing+')'});
    $(this).hide();
});

0

Nếu bạn đang cố gắng thêm một hình ảnh trong một nút động dựa trên bối cảnh của dự án của bạn, bạn có thể sử dụng? lấy để tham khảo các nguồn dựa trên một kết quả. Ở đây tôi đang sử dụng thiết kế mvvm để cho giá trị Model.Phase [0] của tôi xác định xem tôi muốn nút của mình được gắn với hình ảnh của bóng đèn bật hay tắt dựa trên giá trị của pha sáng.

Không chắc chắn nếu điều này giúp. Tôi đang sử dụng JqueryUI, Blueprint và CSS. Định nghĩa lớp sẽ cho phép bạn định kiểu nút dựa trên bất cứ điều gì bạn muốn.

    <button>                           
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>                             
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>   
  <img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>     


0

Tôi sẽ thêm điều này: hình nền cũng có thể được định vị bằng background-position: x y;(x ngang y dọc). (..) Trường hợp của tôi, CSS:

(..) 
#header {
  height: 100px; 
  background-image: url(http://.../head6.jpg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-color: grey; 
  (..)
} 
(...)

0

Mã HTML:

<!DOCTYPE html>
<html>
     <head>
         <link type="text/css" rel="stylesheet" href="css destination" />
     </head>
     <body>
<!-- click-able pic with link -->
           <a href="site you want"> 
<!-- Take the off if you don't want click-able link -->
                <h1 id(or class)="nameOfClassorid">
                     <span>Text that is not important</span>
                </h1>
           </a>
      </body>
 </html>

Mã Css:

span {
     display: none;
}
h1 id or class {
     height: of pic;
     width: of pic;
/* Only flaw (so far) read bottom */
     background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
     background-image:url(/* 'new background!!!' */);
}

Tôi đã học html sau giờ học vài ngày và muốn biết làm thế nào để làm điều này. Tìm ra nền và sau đó đặt 2 và 2 lại với nhau. Điều này hoạt động 100% tôi đã kiểm tra, nếu không chắc chắn bạn điền vào những thứ cần thiết !!! Chúng ta cần xác định chiều cao, vì nếu không có nó thì sẽ không có gì !!! Tôi sẽ để lại lớp vỏ cơ bản này mà bạn có thể bổ sung.

Thí dụ:

 <!DOCTYPE html>
 <html>
     <head>
         <link type="text/css" rel="stylesheet" href="style.css" />
     </head>
     <body>
           <a href="http:localhost"> 
                <h1>
                     <span>Text that is not important</span>
                </h1>
           </a>
     </body>
 </html>
span {
     display: none;
}
h1 {
     height: 100px;
     width: 100px;
     background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/Ubuntu-Desktop-@-2011-01-11-191526-300x225.png");
}

h1:hover {
     height: 300px;
     width: 300px;
     background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}

PS Có tôi là người dùng Linux;)


0

Bất kỳ phương pháp nào dựa trên backgroundhoặc background-imagecó khả năng thất bại khi người dùng in tài liệu bị vô hiệu hóa "in màu nềnhình ảnh " . Thật không may, mặc định của trình duyệt điển hình.

Phương pháp duy nhất tương thích với trình duyệt và tương thích trình duyệt ở đây là phương pháp được đề xuất bởi Bronx.


0

Đang tải IMG src từ định nghĩa CSS, sử dụng các thuộc tính CSS hiện đại

<style>
  body {
    --imgid: 1025; /* optional default img */
  }

  .shoes {
    --imgid: 21;
  }

  .bridge {
    --imgid: 84;
  }

  img {
    --src: "//i.picsum.photos/id/"var(--imgid)"/180/180.jpg"
  }

</style>
<script>
  function loadIMG(img) {
    img.src = getComputedStyle(img)	// compute style for img
      .getPropertyValue("--src")		// get css property
      .replace(/[" ]/g, "");				// strip quotes and space
  }

</script>
<img src onerror=loadIMG(this) class=bridge>
<img src onerror=loadIMG(this) class=shoes>
<img src onerror=loadIMG(this)>

  • trống rỗng srcđịnh nghĩa trên <IMG> kích hoạt trình xử lý onerror: hàm loadIMG
  • Hàm loadIMG tính toán giá trị CSS
  • tước bỏ tất cả các nhân vật bất hợp pháp
  • đặt IMG.src
  • khi CSS thay đổi, hình ảnh KHÔNG được cập nhật! Bạn phải gọi lại loadIMG

JSFiddle: https://jsfiddle.net/CustomElementsExamples/vjfpu3a2/


Câu trả lời SO liên quan: WCPROPS



-3

Chỉ cần sử dụng HTML5 :)

<picture>
    <source srcset="smaller.jpg" media="(max-width: 768px)">
    <source srcset="default.jpg">
    <img srcset="default.jpg" alt="My default image">
</picture>

OP đặc biệt đang tìm cách dọn sạch đánh dấu HTML của họ bằng một giải pháp CSS. Câu trả lời này sẽ chỉ làm lộn xộn thêm đánh dấu.
webaholik
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.