Is it possible to set the src attribute value in CSS? At present, what iI am doing is:
是否可以在CSS中设置src属性值?目前，我正在做的是:
<img src="pathTo/myImage.jpg"/>
and I want it to be something like this
我希望它是这样的
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
I want to do this without using the background or background-image: properties in CSS.
我想不使用背景或背景图像:CSS中的属性来实现这一点。
24 个解决方案
#1
683
使用内容:url(“image.jpg”)。
Full working solution (Live Demo):
全工作解决方案(现场演示):
<!doctype html>
<style>
.MyClass123{
content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>
<img class="MyClass123"/>Tested and working:
测试和工作:
- Chrome 14.0.835.163
- Chrome 14.0.835.163
- Safari 4.0.5
- Safari你
- Opera 10.6
- Opera 10.6
Tested and Not working:
测试和不工作:
- FireFox 40.0.2 (observing Developer Network Tools, you can see that the URL loads, but the image is not displayed)
- FireFox 40.0.2(观察开发人员网络工具，您可以看到URL加载，但是图像没有显示)
- Internet Explorer 11.0.9600.17905 (URL never loads)
- Internet Explorer 11.0.9600.17905 (URL永不装载)
#2
154
There is a solution that I found out today (works in IE6+, FF, Opera, Chrome):
我今天找到了一个解决方案(适用于IE6+、FF、Opera、Chrome):
<img src='willbehidden.png'
style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
How it works:
它是如何工作的:
- The image is shrunk until no longer visible by the width & height.
- 图像被缩小，直到宽度和高度不再可见。
- Then, you need to 'reset' the image size with padding. This one gives a 16x16 image. Of course you can use padding-left / padding-top to make rectangular images.
- 然后，需要用填充“重置”图像大小。这个给出了一个16x16的图像。当然，你可以使用划桨-左/划桨-顶部来制作矩形图像。
- Finally, the new image is put there using background.
- 最后，新的图像被放在那里使用背景。
- If the new background image is too large or too small, I recommend using
background-sizefor example:background-size:cover;which fits your image into the allotted space. - 如果新的背景图像太大或太小，我建议使用背景尺寸，例如:背景尺寸:cover;它适合你的形象到分配的空间。
It also works for submit-input-images, they stay clickable.
它也适用于提交-输入-图像，它们是可点击的。
See live demo: http://www.audenaerde.org/csstricks.html#imagereplacecss
看到现场演示:http://www.audenaerde.org/csstricks.html imagereplacecss
Enjoy!
享受吧!
#3
86
A collection of possible methods to set images from CSS
CSS2's :after pseudo-element or the newer syntax ::after from CSS3 along with the content: property:
CSS2:after pseudo-element or the new syntax::after from CSS3 with content: property:
First W3C Recommendation: Cascading Style Sheets, level 2 CSS2 Specification 12 May 1998
Latest W3C Recommendation: Selectors Level 3 W3C Recommendation 29 September 2011
第一个W3C推荐标准:级联样式表，第2级CSS2规范1998年5月12日最新W3C推荐标准:第三级W3C推荐标准2011年9月29日
This method appends content just after an element's document tree content.
该方法在元素的文档树内容之后追加内容。
Note: some browsers experimentally render the content property directly over some element selectors disregarding even the latest W3C recommendation that defines:
注意:一些浏览器通过某些元素选择器直接呈现内容属性，而不考虑最近定义的W3C推荐标准:
Applies to:
:beforeand:afterpseudo-elements适用于::之前和:伪元素之后。
CSS2 syntax (forward-compatible):
CSS2语法(兼容性):
.myClass:after {
content: url("somepicture.jpg");
}
CSS3 Selector:
CSS3选择器:
.myClass::after {
content: url("somepicture.jpg");
}
Default rendering: Original Size (does not depend on explicit size declaration)
缺省呈现:原始大小(不依赖于显式大小声明)
This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
此规范没有完全定义:before和:after替换元素(如HTML中的IMG)的交互。这将在未来的规范中进行更详细的定义。
but even at the time of this writing, behaviour with a <IMG> tag is still not defined and although it can be used in a hacked and non standards compliant way, usage with <img> is not recommended!
但是，即使在撰写本文时，
标记的行为仍然没有定义，尽管它可以以一种被黑客攻击和不符合标准的方式使用，但不建议使用 !
Great candidate method, see conclusions...
很好的候选方法，见结论…
CSS1's
background-image: property:
First W3C Recommendation: Cascading Style Sheets, level 1 17 Dec 1996
第一个W3C推荐标准:级联样式表，1996年12月17日
This property sets the background image of an element. When setting a background image, one should also set a background color that will be used when the image is unavailable. When the image is available, it is overlaid on top of the background color.
此属性设置元素的背景图像。当设置背景图像时，还应该设置一个背景颜色，当图像不可用时将使用这个颜色。当图像可用时，它被覆盖在背景色上。
This property has been around from the beginning of CSS and nevertheless it deserve a glorious mention.
这个属性从CSS开始就一直存在，但是它值得一提。
Default rendering: Original Size (cannot be scaled, only positioned)
默认渲染:原始大小(不能缩放，只能定位)
However,
然而,
CSS3's background-size: property improved on it by allowing multiple scaling options:
CSS3的后台大小:通过允许多个缩放选项，属性得到了改进:
Latest W3C Status: Candidate Recommendation CSS Backgrounds and Borders Module Level 3 9 September 2014
最新的W3C状态:候选推荐CSS背景和边框模块级别，2014年9月9日
[length> | <percentage> | auto ]{1,2} | cover | contain[长度> | <百分比> |自动]{1,2}|覆盖|所含
But even with this property, it depends on container size.
但是即使有这个属性，它也取决于容器的大小。
Still a good candidate method, see conclusions...
仍然是一个很好的候选方法，见结论……
CSS2's list-style: property along with display: list-item:
CSS2的list-style:属性和display: list-item:
First W3C Recommendation: Cascading Style Sheets, level 2 CSS2 Specification 12 May 1998
第一个W3C推荐标准:级联样式表，第2级CSS2规范1998年5月12日
list-style-image: property sets the image that will be used as the list item marker (bullet)
list-style-image:属性设置将用作列表项标记的图像(项目符号)
The list properties describe basic visual formatting of lists: they allow style sheets to specify the marker type (image, glyph, or number)
列表属性描述列表的基本视觉格式:它们允许样式表指定标记类型(图像、字形或数字)
display: list-item — This value causes an element (e.g., <li> in HTML) to generate a principal block box and a marker box.
display: list-item -这个值导致一个元素(例如，HTML中的
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
Shorthand CSS: (<list-style-type> <list-style-position> <list-style-image>)
CSS简写( <列表样式类型> <列表样式位置> <列表样式-图像> )
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
Default rendering: Original Size (does not depend on explicit size declaration)
缺省呈现:原始大小(不依赖于显式大小声明)
Restrictions:
限制:
-
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
继承将“list-style”值从OL和UL元素转移到LI元素。这是指定列表样式信息的推荐方式。
-
They do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position
它们不允许作者为列表标记指定不同的样式(颜色、字体、对齐等)，或者调整其位置。
This method is also not suitable for the <img> tag as the conversion cannot be made between element types, and here's the limited, non compliant hack that doesn't work on Chrome.
这个方法也不适用于标签，因为元素类型之间不能进行转换，这里有一个限制，不兼容的hack，不能在Chrome上工作。
Good candidate method, see conclusions...
好的候选方法，见结论…
CSS3's border-image: property recommendation:
CSS3 border-image:财产推荐:
Latest W3C Status: Candidate Recommendation CSS Backgrounds and Borders Module Level 3 9 September 2014
最新的W3C状态:候选推荐CSS背景和边框模块级别，2014年9月9日
A background-type method that relies on specifying sizes in a rather peculiar manner (not defined for this use case) and fallback border properties so far (eg. border: solid):
一种背景类型的方法，它依赖于以一种非常特殊的方式指定大小(对于这个用例没有定义)和回退边界属性(例如)。边界:固体):
Note that, even though they never cause a scrolling mechanism, outset images may still be clipped by an ancestor or by the viewport.
请注意，即使它们不会导致滚动机制，但是起始图像仍然可能被祖先或viewport剪切。
This example illustrates the image being composed only as a bottom-right corner decoration:
这个例子说明了这个图像只是作为一个右下角的装饰:
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
Applies to: All elements, except internal table elements when
border-collapse: collapse应用于:所有元素，除了边界崩溃时的内部表元素:崩溃
Still it can't change an <img>'s tag src (but here's a hack), instead we can decorate it:
它仍然不能改变's标签src(但这里有一个技巧)，相反，我们可以装饰它:
.myClass {
border: solid;
border-width: 0 96px 96px 0;
border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png") 0 100% 100% 0;
}<img width="300" height="120" src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg" class="myClass"Good candidate method to be considered after standards propagate.
标准传播后要考虑好的候选方法。
CSS3's element() notation working draft is worth a mention also:
CSS3的元素()表示法工作草案也值得一提:
Note: The
element()function only reproduces the appearance of the referenced element, not the actual content and its structure.注意:element()函数只再现引用元素的外观，而不再现实际内容及其结构。
<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">
We'll use the rendered contents of one of the two hidden images to change the image background in #img1 based on the ID Selector via CSS:
我们将使用两个隐藏图像之一的渲染内容，基于ID选择器通过CSS更改#img1中的图像背景:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
Notes: It's experimental and only works with the -moz prefix in Firefox and only over background or background-image properties, also needs sizes specified.
注意:它是实验性的，只在Firefox中使用-moz前缀，并且只在后台或背景图像属性上使用，还需要指定大小。
- element() Live Demo
- 元素()现场演示
Conclusions
- Any semantic content or structural information goes in HTML.
- 任何语义内容或结构信息都使用HTML。
- Styling and presentational information goes in CSS.
- 样式和呈现信息在CSS中。
- For SEO purposes, don't hide meaningful images in CSS.
- 出于SEO目的，不要在CSS中隐藏有意义的图像。
- Background graphics are usually disabled when printing.
- 背景图形通常在打印时被禁用。
- Custom tags could be used and styled from CSS, but primitive versions of Internet Explorer does not understand without Javascript or CSS guidance.
- 可以使用自定义标记并使用CSS样式，但是如果没有Javascript或CSS指导，Internet Explorer的原始版本是无法理解的。
- SPA's (Single Page Applications), by design, usually incorporate images in the background
- SPA(单页应用程序)的设计通常是将图像合并到背景中
Having said that, let's explore HTML tags fit for image display:
说到这里，让我们来探索适合于图像显示的HTML标记:
The <li> element [HTML4.01+]
Perfect usecase of the list-style-image with display: list-item method.
具有显示的列表样式图像的完美用法:列表项方法。
The <li> element, can be empty, allows flow content and it's even permitted to omit the </li> end tag.
.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}<ul class="bulletPics">
<li id="img1">movie</li>
<li id="img2">earth</li>
<li id="img3">kiwi</li>
</ul>Limitations: hard to style (width: or float: might help)
限制:难以样式化(宽度:或浮动:可能有帮助)
The <figure> element [HTML5+]
The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.
图元素表示一些流内容，可以选择带有自包含的标题(就像完整的句子)，并且通常作为一个单元从文档的主流中引用。
The element is valid with no content, but is recommended to contain a <figcaption>.
元素在没有内容的情况下是有效的，但是建议包含< fig标题>。
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.
因此，元素可以用于注释插图、图、照片、代码列表等。
Default rendering: the element is right aligned, with both left and right padding!
默认渲染:元素是右对齐的，有左和右填充!
- FIGURE Live Demo
- 图现场演示
The <object> element [HTML4+]
To include images, authors may use the OBJECT element or the IMG element.
要包含图像，作者可以使用对象元素或IMG元素。
The data attribute is required and can have a valid MIME type as a value!
数据属性是必需的，并且可以有一个有效的MIME类型作为一个值!
<object data="data:x-image/x,"></object>
Note: a trick to make use of the <object> tag from CSS would be to set a custom valid MimeType x-image/x followed by no data (value has no data after the required comma ,)
注意:使用CSS中的
Default rendering: 300 x 150px, but size can be specified either in HTML or CSS.
默认渲染:300 x 150像素，但是大小可以在HTML或CSS中指定。
- OBJECT Live Demo
- 对象现场演示
The <SVG> tag
Needs a SVG capable browser and has a <image> element for raster images
需要一个支持SVG的浏览器，并有一个用于光栅图像的元素
- SVG Live Demo
- SVG现场演示
The <canvas> element [HTML5+].
The
widthattribute defaults to 300, and theheightattribute defaults to 150.宽度属性默认为300，高度属性默认为150。
- CANVAS Live Demo
- 画布上现场演示
The <input> element with type="image"
Limitations:
限制:
... the element is expected to appear button-like to indicate that the element is a button.
…元素应该显示为按钮状，以表明元素是按钮。
which Chrome follows and renders a 4x4px empty square when no text
在没有文本的情况下，哪个Chrome会跟随并呈现一个4x4px的空白正方形
Partial solution, set value=" ":
部分解，设定值=" ":
<input type="image" id="img1" value=" ">
- INPUT type=image Live Demo
- 输入类型=图像演示
Also watch out for the upcoming <picture> element in HTML5.1, currently a working draft.
还要注意HTML5.1中即将出现的
#4
20
i used the empty div solution, with this CSS:
我使用了空的div解决方案，使用这个CSS:
#throbber {
background-image: url(/Content/pictures/ajax-loader.gif);
background-repeat: no-repeat;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
}
HTML:
HTML:
<div id="throbber"></div>
#5
13
They are right. IMG is a content element and CSS is about design. But, how about when you use some content elements or properties for design purposes? I have IMG across my web pages that must change if i change the style (the CSS).
他们是对的。IMG是一个内容元素，CSS是关于设计的。但是，当您使用一些内容元素或属性进行设计时，又如何呢?我的网页上有IMG，如果我改变样式(CSS)，它就必须改变。
Well this is a solution for defining IMG presentation (no really the image) in CSS style.
这是一个用CSS样式定义IMG表示(不是真正的图像)的解决方案。
- create a 1x1 transparent gif or png.
- 创建一个1x1透明gif或png。
- Assign propery "src" of IMG to that image.
- 将IMG的“src”属性赋给该映像。
- Define final presentation with "background-image" in the CSS style.
- 用CSS样式的“背景图像”定义最终的表示。
It works like a charm :)
它就像一种魅力:)
#6
13
I found a better way than the proposed solutions, but it does use the background-image indeed. Compliant method (cannot confirm for IE6) Credits: http://www.kryogenix.org/code/browser/lir/
我找到了比提议的解决方案更好的方法，但是它确实使用了背景图像。兼容方法(无法确认IE6): http://www.kryogenix.org/code/browser/lir/
<img src="pathTo/myImage.jpg"/>
The CSS:
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;
}
The old image is not seen and the new is seen as expected.
旧的不可见，新的不可见。
The following neat solution only works for webkit
以下简洁的解决方案只适用于webkit
img[src*="pathTo/myImage.jpg"] {
/* note :) */
content:'';
display:inline-block;
width: 20px;
height: 20px;
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
}
#7
9
Here is a very good solution -> http://css-tricks.com/replace-the-image-in-an-img-with-css/
Pro(s) and Con(s):
(+) works with vector image that have relative width/height (a thing that RobAu's answer does not handle)
(+) is cross browser (works also for IE8+)
(+) it only uses CSS. So no need to modify the img src (or if you do not have access/do not want to change the already existing img src attribute).
(-) sorry, it does use the background css attribute :)
这里有一个很好的解决方案——> http://css-老爸解(置换)-img-with-css/ Pro(s)和Con(s):(+)使用具有相对宽度/高度的矢量图像(RobAu的答案不能处理)(+)是跨浏览器(也适用于IE8+)(+)它只使用CSS。因此，不需要修改img src(或者如果您没有访问权限/不想更改已经存在的img src属性)。(-)对不起，它确实使用了背景css属性:)
#8
8
You can define 2 images in your HTML code and use display: none; to decide which one will be visible.
您可以在HTML代码中定义2个图像并使用display: none;决定哪一个是可见的。
#9
5
No you can't set the image src attribute via CSS. The closest you can get is, as you say, background or background-image. I wouldn't recommend doing that anyway as it would be somewhat illogical.
不，你不能通过CSS设置图像src属性。正如你所说，你能得到的最接近的是背景或背景图像。我不建议这样做，因为这样做有些不合逻辑。
However, there is a CSS3 solution available to you, if the browsers you're targeting are able to use it. Use content:url as described in Pacerier's answer. You can find other, cross-browser solutions in the other answers below.
但是，如果您的目标浏览器能够使用CSS3解决方案，那么您可以使用它。使用内容:如Pacerier的答案所描述的url。您可以在下面的其他答案中找到其他跨浏览器的解决方案。
#10
4
Put several images in a "controlling" container, and change the container's class instead. In CSS, add rules to manage images' visibility depending on the container's class. This will produce the same effect as changing img src property of a a single image.
将几个映像放在“控制”容器中，然后更改容器的类。在CSS中，根据容器的类添加规则来管理图像的可见性。这将产生和改变img src属性一样的效果。
HTML:
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:
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
Note that it will preload all images, like with CSS backround-images, but unlike changing img src via JS.
注意，它将预加载所有图像，如CSS backround图像，但不像通过JS修改img src。
#11
3
As far as I am aware of, YOU CANNOT. CSS is about style and image's src is content.
据我所知，你不能。CSS是关于样式，图像的src是内容。
#12
2
To reiterate a prior solution and to stress the pure CSS implementation here is my answer.
我的回答是重申先前的解决方案并强调纯CSS实现。
A Pure CSS solution is needed in cases where you are sourcing content from another site, and thus you have no control over the HTML that is delivered. In my case I am trying to remove branding of licensed source content so that the licencee does not have to advertise for the company they are buying the content from. Therefore, I'm removing their logo while keeping everything else. I should note that this is within my client's contract to do so.
如果您正在从另一个站点获取内容，因此您无法控制所交付的HTML，那么就需要一个纯CSS解决方案。在我的情况下，我正在试图删除授权源内容的品牌，以便被许可方不必为他们购买内容的公司做广告。因此，我删除了他们的标志，同时保留了其他一切。我要注意的是，这是我的客户的合同。
{ /* 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);
}
#13
2
Alternative way
替代方法
.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
#14
2
I know this is a really old question however no answers provide the proper reasoning for why this can never be done. While you can "do" what you are looking for you cannot do it in a valid way. In order to have a valid img tag it must have the src and alt attributes.
我知道这是一个非常古老的问题，但是没有任何答案可以解释为什么这一切永远不可能实现。虽然你可以“做”你正在寻找的，但你不能以有效的方式去做。为了有一个有效的img标签，它必须有src和alt属性。
So any of the answers giving a way to do this with an img tag that does not use the src attribute are promoting use of invalid code.
因此，任何给出不使用src属性的img标记的答案都在促进无效代码的使用。
In short: what you are looking for cannot be done legally within the structure of the syntax.
简而言之:您正在寻找的内容不能在语法结构中合法地执行。
Source: W3 Validator
来源:W3验证器
#15
1
If you don't want to set a background property then you can't set the src attribute of an image using only CSS.
如果不希望设置背景属性，则不能仅使用CSS设置图像的src属性。
Alternatively you can use JavaScript to do such a thing.
或者，您可以使用JavaScript来做这样的事情。
#16
1
Using CSS, it can't be done. But, if you are using JQuery, something like this will do the trick:
使用CSS是不可能的。但是，如果您使用的是JQuery，那么类似的操作就可以达到这个目的:
$("img.myClass").attr("src", "http://somwhere");
#17
1
Or you could do this which I found on the interweb thingy.
或者你也可以这样做我在互联网上找到的东西。
https://robau.wordpress.com/2012/04/20/override-image-src-in-css/
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;
}
So effectively hiding the image and padding down the background. Oh what a hack but if you want an IMG tag with alt text and a background that can scale without using JavaScript?
因此有效地隐藏图像和填充背景。如果你想要一个带有alt文本和背景的IMG标签，不需要使用JavaScript就可以扩展的话，这是一个怎样的技巧呢?
In a project I'm working on now I created a hero block twig template
在我正在进行的一个项目中，我创建了一个hero block twig模板
<div class="hero">
<img class="image" src="{{ bgImageSrc }}"
alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
#18
1
You can convert it with JS:
可以用JS进行转换:
$('.image-class').each(function(){
var processing = $(this).attr('src');
$(this).parent().css({'background-image':'url('+processing+')'});
$(this).hide();
});
#19
1
Some data I whould leave in HTML, but src better define in CSS:
有些数据我应该用HTML保存，但src最好用CSS来定义:
<img alt="Test Alt text" title="Title text" class="logo">
.logo {
content:url('../images/logo.png');
}
#20
0
If you are trying to add an image in a button dynamically based on the context of your project, you can use the ? take to reference the source based on an outcome. Here I am using mvvm design to let my Model.Phases[0] value determine whether I want my button to be populated with images of a lightbulb on or off based on the value of the light phase.
如果您试图根据项目的上下文动态地在按钮中添加图像，您可以使用?参考基于结果的源。这里我使用mvvm设计来让我的模型。相位[0]值决定我想要我的按钮是由一个灯泡的图像填充还是由它的光相位填充的。
Not sure if this helps. I'm using JqueryUI, Blueprint, and CSS. The class definition should allow you to style the button based on whatever you'd like.
不确定这是否有用。我使用JqueryUI、Blueprint和CSS。类定义应该允许您根据您想要的任何内容来设计按钮。
<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")"/>
#21
0
I would add this: background image could be also positioned with background-position: x y; (x horizontal y vertical). (..) My case, CSS:
我将添加这个:背景图像也可以定位于背景位置:x y;(x水平垂直)。(. .)我来说,CSS:
(..)
#header {
height: 100px;
background-image: url(http://.../head6.jpg);
background-position: center;
background-repeat: no-repeat;
background-color: grey;
(..)
}
(...)
#22
0
HTMl Code:
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>
Css Code:
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!!!' */);
}
I've been studying html after school for a few days, and wanted to know how to do this. Found out the background and then put 2 and 2 together. This works 100% I checked, if not make sure you fill in necessary things!!! We need to specify height, because without it there would be nothing!!! I'll leave this basic shell you can add-on.
我在放学后学习html已经有几天了，我想知道怎么做。找到背景，然后把2和2放在一起。这工作100%我检查过，如果不确定你填写了必要的东西!!我们需要指定高度，因为没有它，什么也没有!!我留下这个基本的外壳你可以添加。
Example:
例子:
<!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");
}
P.S. Yes I am a Linux user ;)
是的，我是一个Linux用户;
#23
0
Any method based on background or background-image is likely to fail when user prints the document with "print background colors and images" disabled. Which is unfortunately typical browser's default.
任何基于背景或背景图像的方法在用户打印禁用“打印背景颜色和图像”的文档时都可能失败。这是典型浏览器的默认设置。
The only print-friendly and cross-browser compatible method here is the one proposed by Bronx.
这里唯一支持打印和跨浏览器兼容的方法是Bronx提出的方法。
#24
-2
Just use HTML5 :)
只使用HTML5:)
<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>
#1
683
使用内容:url(“image.jpg”)。
Full working solution (Live Demo):
全工作解决方案(现场演示):
<!doctype html>
<style>
.MyClass123{
content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>
<img class="MyClass123"/>Tested and working:
测试和工作:
- Chrome 14.0.835.163
- Chrome 14.0.835.163
- Safari 4.0.5
- Safari你
- Opera 10.6
- Opera 10.6
Tested and Not working:
测试和不工作:
- FireFox 40.0.2 (observing Developer Network Tools, you can see that the URL loads, but the image is not displayed)
- FireFox 40.0.2(观察开发人员网络工具，您可以看到URL加载，但是图像没有显示)
- Internet Explorer 11.0.9600.17905 (URL never loads)
- Internet Explorer 11.0.9600.17905 (URL永不装载)
#2
154
There is a solution that I found out today (works in IE6+, FF, Opera, Chrome):
我今天找到了一个解决方案(适用于IE6+、FF、Opera、Chrome):
<img src='willbehidden.png'
style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
How it works:
它是如何工作的:
- The image is shrunk until no longer visible by the width & height.
- 图像被缩小，直到宽度和高度不再可见。
- Then, you need to 'reset' the image size with padding. This one gives a 16x16 image. Of course you can use padding-left / padding-top to make rectangular images.
- 然后，需要用填充“重置”图像大小。这个给出了一个16x16的图像。当然，你可以使用划桨-左/划桨-顶部来制作矩形图像。
- Finally, the new image is put there using background.
- 最后，新的图像被放在那里使用背景。
- If the new background image is too large or too small, I recommend using
background-sizefor example:background-size:cover;which fits your image into the allotted space. - 如果新的背景图像太大或太小，我建议使用背景尺寸，例如:背景尺寸:cover;它适合你的形象到分配的空间。
It also works for submit-input-images, they stay clickable.
它也适用于提交-输入-图像，它们是可点击的。
See live demo: http://www.audenaerde.org/csstricks.html#imagereplacecss
看到现场演示:http://www.audenaerde.org/csstricks.html imagereplacecss
Enjoy!
享受吧!
#3
86
A collection of possible methods to set images from CSS
CSS2's :after pseudo-element or the newer syntax ::after from CSS3 along with the content: property:
CSS2:after pseudo-element or the new syntax::after from CSS3 with content: property:
First W3C Recommendation: Cascading Style Sheets, level 2 CSS2 Specification 12 May 1998
Latest W3C Recommendation: Selectors Level 3 W3C Recommendation 29 September 2011
第一个W3C推荐标准:级联样式表，第2级CSS2规范1998年5月12日最新W3C推荐标准:第三级W3C推荐标准2011年9月29日
This method appends content just after an element's document tree content.
该方法在元素的文档树内容之后追加内容。
Note: some browsers experimentally render the content property directly over some element selectors disregarding even the latest W3C recommendation that defines:
注意:一些浏览器通过某些元素选择器直接呈现内容属性，而不考虑最近定义的W3C推荐标准:
Applies to:
:beforeand:afterpseudo-elements适用于::之前和:伪元素之后。
CSS2 syntax (forward-compatible):
CSS2语法(兼容性):
.myClass:after {
content: url("somepicture.jpg");
}
CSS3 Selector:
CSS3选择器:
.myClass::after {
content: url("somepicture.jpg");
}
Default rendering: Original Size (does not depend on explicit size declaration)
缺省呈现:原始大小(不依赖于显式大小声明)
This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
此规范没有完全定义:before和:after替换元素(如HTML中的IMG)的交互。这将在未来的规范中进行更详细的定义。
but even at the time of this writing, behaviour with a <IMG> tag is still not defined and although it can be used in a hacked and non standards compliant way, usage with <img> is not recommended!
但是，即使在撰写本文时，标记的行为仍然没有定义，尽管它可以以一种被黑客攻击和不符合标准的方式使用，但不建议使用 !
Great candidate method, see conclusions...
很好的候选方法，见结论…
CSS1's
background-image: property:
First W3C Recommendation: Cascading Style Sheets, level 1 17 Dec 1996
第一个W3C推荐标准:级联样式表，1996年12月17日
This property sets the background image of an element. When setting a background image, one should also set a background color that will be used when the image is unavailable. When the image is available, it is overlaid on top of the background color.
此属性设置元素的背景图像。当设置背景图像时，还应该设置一个背景颜色，当图像不可用时将使用这个颜色。当图像可用时，它被覆盖在背景色上。
This property has been around from the beginning of CSS and nevertheless it deserve a glorious mention.
这个属性从CSS开始就一直存在，但是它值得一提。
Default rendering: Original Size (cannot be scaled, only positioned)
默认渲染:原始大小(不能缩放，只能定位)
However,
然而,
CSS3's background-size: property improved on it by allowing multiple scaling options:
CSS3的后台大小:通过允许多个缩放选项，属性得到了改进:
Latest W3C Status: Candidate Recommendation CSS Backgrounds and Borders Module Level 3 9 September 2014
最新的W3C状态:候选推荐CSS背景和边框模块级别，2014年9月9日
[length> | <percentage> | auto ]{1,2} | cover | contain[长度> | <百分比> |自动]{1,2}|覆盖|所含
But even with this property, it depends on container size.
但是即使有这个属性，它也取决于容器的大小。
Still a good candidate method, see conclusions...
仍然是一个很好的候选方法，见结论……
CSS2's list-style: property along with display: list-item:
CSS2的list-style:属性和display: list-item:
First W3C Recommendation: Cascading Style Sheets, level 2 CSS2 Specification 12 May 1998
第一个W3C推荐标准:级联样式表，第2级CSS2规范1998年5月12日
list-style-image: property sets the image that will be used as the list item marker (bullet)
list-style-image:属性设置将用作列表项标记的图像(项目符号)
The list properties describe basic visual formatting of lists: they allow style sheets to specify the marker type (image, glyph, or number)
列表属性描述列表的基本视觉格式:它们允许样式表指定标记类型(图像、字形或数字)
display: list-item — This value causes an element (e.g., <li> in HTML) to generate a principal block box and a marker box.
display: list-item -这个值导致一个元素(例如，HTML中的
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
Shorthand CSS: (<list-style-type> <list-style-position> <list-style-image>)
CSS简写( <列表样式类型> <列表样式位置> <列表样式-图像> )
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
Default rendering: Original Size (does not depend on explicit size declaration)
缺省呈现:原始大小(不依赖于显式大小声明)
Restrictions:
限制:
-
Inheritance will transfer the 'list-style' values from OL and UL elements to LI elements. This is the recommended way to specify list style information.
继承将“list-style”值从OL和UL元素转移到LI元素。这是指定列表样式信息的推荐方式。
-
They do not allow authors to specify distinct style (colors, fonts, alignment, etc.) for the list marker or adjust its position
它们不允许作者为列表标记指定不同的样式(颜色、字体、对齐等)，或者调整其位置。
This method is also not suitable for the <img> tag as the conversion cannot be made between element types, and here's the limited, non compliant hack that doesn't work on Chrome.
这个方法也不适用于标签，因为元素类型之间不能进行转换，这里有一个限制，不兼容的hack，不能在Chrome上工作。
Good candidate method, see conclusions...
好的候选方法，见结论…
CSS3's border-image: property recommendation:
CSS3 border-image:财产推荐:
Latest W3C Status: Candidate Recommendation CSS Backgrounds and Borders Module Level 3 9 September 2014
最新的W3C状态:候选推荐CSS背景和边框模块级别，2014年9月9日
A background-type method that relies on specifying sizes in a rather peculiar manner (not defined for this use case) and fallback border properties so far (eg. border: solid):
一种背景类型的方法，它依赖于以一种非常特殊的方式指定大小(对于这个用例没有定义)和回退边界属性(例如)。边界:固体):
Note that, even though they never cause a scrolling mechanism, outset images may still be clipped by an ancestor or by the viewport.
请注意，即使它们不会导致滚动机制，但是起始图像仍然可能被祖先或viewport剪切。
This example illustrates the image being composed only as a bottom-right corner decoration:
这个例子说明了这个图像只是作为一个右下角的装饰:
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
Applies to: All elements, except internal table elements when
border-collapse: collapse应用于:所有元素，除了边界崩溃时的内部表元素:崩溃
Still it can't change an <img>'s tag src (but here's a hack), instead we can decorate it:
它仍然不能改变's标签src(但这里有一个技巧)，相反，我们可以装饰它:
.myClass {
border: solid;
border-width: 0 96px 96px 0;
border-image: url("http://upload.wikimedia.org/wikipedia/commons/9/95/Christmas_bell_icon_1.png") 0 100% 100% 0;
}<img width="300" height="120" src="http://fc03.deviantart.net/fs71/f/2012/253/b/0/merry_christmas_card_by_designworldwide-d5e9746.jpg" class="myClass"Good candidate method to be considered after standards propagate.
标准传播后要考虑好的候选方法。
CSS3's element() notation working draft is worth a mention also:
CSS3的元素()表示法工作草案也值得一提:
Note: The
element()function only reproduces the appearance of the referenced element, not the actual content and its structure.注意:element()函数只再现引用元素的外观，而不再现实际内容及其结构。
<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">
We'll use the rendered contents of one of the two hidden images to change the image background in #img1 based on the ID Selector via CSS:
我们将使用两个隐藏图像之一的渲染内容，基于ID选择器通过CSS更改#img1中的图像背景:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
Notes: It's experimental and only works with the -moz prefix in Firefox and only over background or background-image properties, also needs sizes specified.
注意:它是实验性的，只在Firefox中使用-moz前缀，并且只在后台或背景图像属性上使用，还需要指定大小。
- element() Live Demo
- 元素()现场演示
Conclusions
- Any semantic content or structural information goes in HTML.
- 任何语义内容或结构信息都使用HTML。
- Styling and presentational information goes in CSS.
- 样式和呈现信息在CSS中。
- For SEO purposes, don't hide meaningful images in CSS.
- 出于SEO目的，不要在CSS中隐藏有意义的图像。
- Background graphics are usually disabled when printing.
- 背景图形通常在打印时被禁用。
- Custom tags could be used and styled from CSS, but primitive versions of Internet Explorer does not understand without Javascript or CSS guidance.
- 可以使用自定义标记并使用CSS样式，但是如果没有Javascript或CSS指导，Internet Explorer的原始版本是无法理解的。
- SPA's (Single Page Applications), by design, usually incorporate images in the background
- SPA(单页应用程序)的设计通常是将图像合并到背景中
Having said that, let's explore HTML tags fit for image display:
说到这里，让我们来探索适合于图像显示的HTML标记:
The <li> element [HTML4.01+]
Perfect usecase of the list-style-image with display: list-item method.
具有显示的列表样式图像的完美用法:列表项方法。
The <li> element, can be empty, allows flow content and it's even permitted to omit the </li> end tag.
.bulletPics > li {display: list-item}
#img1 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/4/4d/Nuvola_erotic.png")}
#img2 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/7/74/Globe_icon_2014-06-26_22-09.png")}
#img3 {list-style: square inside url("http://upload.wikimedia.org/wikipedia/commons/c/c4/Kiwi_fruit.jpg")}<ul class="bulletPics">
<li id="img1">movie</li>
<li id="img2">earth</li>
<li id="img3">kiwi</li>
</ul>Limitations: hard to style (width: or float: might help)
限制:难以样式化(宽度:或浮动:可能有帮助)
The <figure> element [HTML5+]
The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.
图元素表示一些流内容，可以选择带有自包含的标题(就像完整的句子)，并且通常作为一个单元从文档的主流中引用。
The element is valid with no content, but is recommended to contain a <figcaption>.
元素在没有内容的情况下是有效的，但是建议包含< fig标题>。
The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.
因此，元素可以用于注释插图、图、照片、代码列表等。
Default rendering: the element is right aligned, with both left and right padding!
默认渲染:元素是右对齐的，有左和右填充!
- FIGURE Live Demo
- 图现场演示
The <object> element [HTML4+]
To include images, authors may use the OBJECT element or the IMG element.
要包含图像，作者可以使用对象元素或IMG元素。
The data attribute is required and can have a valid MIME type as a value!
数据属性是必需的，并且可以有一个有效的MIME类型作为一个值!
<object data="data:x-image/x,"></object>
Note: a trick to make use of the <object> tag from CSS would be to set a custom valid MimeType x-image/x followed by no data (value has no data after the required comma ,)
注意:使用CSS中的
Default rendering: 300 x 150px, but size can be specified either in HTML or CSS.
默认渲染:300 x 150像素，但是大小可以在HTML或CSS中指定。
- OBJECT Live Demo
- 对象现场演示
The <SVG> tag
Needs a SVG capable browser and has a <image> element for raster images
需要一个支持SVG的浏览器，并有一个用于光栅图像的元素
- SVG Live Demo
- SVG现场演示
The <canvas> element [HTML5+].
The
widthattribute defaults to 300, and theheightattribute defaults to 150.宽度属性默认为300，高度属性默认为150。
- CANVAS Live Demo
- 画布上现场演示
The <input> element with type="image"
Limitations:
限制:
... the element is expected to appear button-like to indicate that the element is a button.
…元素应该显示为按钮状，以表明元素是按钮。
which Chrome follows and renders a 4x4px empty square when no text
在没有文本的情况下，哪个Chrome会跟随并呈现一个4x4px的空白正方形
Partial solution, set value=" ":
部分解，设定值=" ":
<input type="image" id="img1" value=" ">
- INPUT type=image Live Demo
- 输入类型=图像演示
Also watch out for the upcoming <picture> element in HTML5.1, currently a working draft.
还要注意HTML5.1中即将出现的
#4
20
i used the empty div solution, with this CSS:
我使用了空的div解决方案，使用这个CSS:
#throbber {
background-image: url(/Content/pictures/ajax-loader.gif);
background-repeat: no-repeat;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
}
HTML:
HTML:
<div id="throbber"></div>
#5
13
They are right. IMG is a content element and CSS is about design. But, how about when you use some content elements or properties for design purposes? I have IMG across my web pages that must change if i change the style (the CSS).
他们是对的。IMG是一个内容元素，CSS是关于设计的。但是，当您使用一些内容元素或属性进行设计时，又如何呢?我的网页上有IMG，如果我改变样式(CSS)，它就必须改变。
Well this is a solution for defining IMG presentation (no really the image) in CSS style.
这是一个用CSS样式定义IMG表示(不是真正的图像)的解决方案。
- create a 1x1 transparent gif or png.
- 创建一个1x1透明gif或png。
- Assign propery "src" of IMG to that image.
- 将IMG的“src”属性赋给该映像。
- Define final presentation with "background-image" in the CSS style.
- 用CSS样式的“背景图像”定义最终的表示。
It works like a charm :)
它就像一种魅力:)
#6
13
I found a better way than the proposed solutions, but it does use the background-image indeed. Compliant method (cannot confirm for IE6) Credits: http://www.kryogenix.org/code/browser/lir/
我找到了比提议的解决方案更好的方法，但是它确实使用了背景图像。兼容方法(无法确认IE6): http://www.kryogenix.org/code/browser/lir/
<img src="pathTo/myImage.jpg"/>
The CSS:
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;
}
The old image is not seen and the new is seen as expected.
旧的不可见，新的不可见。
The following neat solution only works for webkit
以下简洁的解决方案只适用于webkit
img[src*="pathTo/myImage.jpg"] {
/* note :) */
content:'';
display:inline-block;
width: 20px;
height: 20px;
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
}
#7
9
Here is a very good solution -> http://css-tricks.com/replace-the-image-in-an-img-with-css/
Pro(s) and Con(s):
(+) works with vector image that have relative width/height (a thing that RobAu's answer does not handle)
(+) is cross browser (works also for IE8+)
(+) it only uses CSS. So no need to modify the img src (or if you do not have access/do not want to change the already existing img src attribute).
(-) sorry, it does use the background css attribute :)
这里有一个很好的解决方案——> http://css-老爸解(置换)-img-with-css/ Pro(s)和Con(s):(+)使用具有相对宽度/高度的矢量图像(RobAu的答案不能处理)(+)是跨浏览器(也适用于IE8+)(+)它只使用CSS。因此，不需要修改img src(或者如果您没有访问权限/不想更改已经存在的img src属性)。(-)对不起，它确实使用了背景css属性:)
#8
8
You can define 2 images in your HTML code and use display: none; to decide which one will be visible.
您可以在HTML代码中定义2个图像并使用display: none;决定哪一个是可见的。
#9
5
No you can't set the image src attribute via CSS. The closest you can get is, as you say, background or background-image. I wouldn't recommend doing that anyway as it would be somewhat illogical.
不，你不能通过CSS设置图像src属性。正如你所说，你能得到的最接近的是背景或背景图像。我不建议这样做，因为这样做有些不合逻辑。
However, there is a CSS3 solution available to you, if the browsers you're targeting are able to use it. Use content:url as described in Pacerier's answer. You can find other, cross-browser solutions in the other answers below.
但是，如果您的目标浏览器能够使用CSS3解决方案，那么您可以使用它。使用内容:如Pacerier的答案所描述的url。您可以在下面的其他答案中找到其他跨浏览器的解决方案。
#10
4
Put several images in a "controlling" container, and change the container's class instead. In CSS, add rules to manage images' visibility depending on the container's class. This will produce the same effect as changing img src property of a a single image.
将几个映像放在“控制”容器中，然后更改容器的类。在CSS中，根据容器的类添加规则来管理图像的可见性。这将产生和改变img src属性一样的效果。
HTML:
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:
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
Note that it will preload all images, like with CSS backround-images, but unlike changing img src via JS.
注意，它将预加载所有图像，如CSS backround图像，但不像通过JS修改img src。
#11
3
As far as I am aware of, YOU CANNOT. CSS is about style and image's src is content.
据我所知，你不能。CSS是关于样式，图像的src是内容。
#12
2
To reiterate a prior solution and to stress the pure CSS implementation here is my answer.
我的回答是重申先前的解决方案并强调纯CSS实现。
A Pure CSS solution is needed in cases where you are sourcing content from another site, and thus you have no control over the HTML that is delivered. In my case I am trying to remove branding of licensed source content so that the licencee does not have to advertise for the company they are buying the content from. Therefore, I'm removing their logo while keeping everything else. I should note that this is within my client's contract to do so.
如果您正在从另一个站点获取内容，因此您无法控制所交付的HTML，那么就需要一个纯CSS解决方案。在我的情况下，我正在试图删除授权源内容的品牌，以便被许可方不必为他们购买内容的公司做广告。因此，我删除了他们的标志，同时保留了其他一切。我要注意的是，这是我的客户的合同。
{ /* 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);
}
#13
2
Alternative way
替代方法
.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
#14
2
I know this is a really old question however no answers provide the proper reasoning for why this can never be done. While you can "do" what you are looking for you cannot do it in a valid way. In order to have a valid img tag it must have the src and alt attributes.
我知道这是一个非常古老的问题，但是没有任何答案可以解释为什么这一切永远不可能实现。虽然你可以“做”你正在寻找的，但你不能以有效的方式去做。为了有一个有效的img标签，它必须有src和alt属性。
So any of the answers giving a way to do this with an img tag that does not use the src attribute are promoting use of invalid code.
因此，任何给出不使用src属性的img标记的答案都在促进无效代码的使用。
In short: what you are looking for cannot be done legally within the structure of the syntax.
简而言之:您正在寻找的内容不能在语法结构中合法地执行。
Source: W3 Validator
来源:W3验证器
#15
1
If you don't want to set a background property then you can't set the src attribute of an image using only CSS.
如果不希望设置背景属性，则不能仅使用CSS设置图像的src属性。
Alternatively you can use JavaScript to do such a thing.
或者，您可以使用JavaScript来做这样的事情。
#16
1
Using CSS, it can't be done. But, if you are using JQuery, something like this will do the trick:
使用CSS是不可能的。但是，如果您使用的是JQuery，那么类似的操作就可以达到这个目的:
$("img.myClass").attr("src", "http://somwhere");
#17
1
Or you could do this which I found on the interweb thingy.
或者你也可以这样做我在互联网上找到的东西。
https://robau.wordpress.com/2012/04/20/override-image-src-in-css/
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;
}
So effectively hiding the image and padding down the background. Oh what a hack but if you want an IMG tag with alt text and a background that can scale without using JavaScript?
因此有效地隐藏图像和填充背景。如果你想要一个带有alt文本和背景的IMG标签，不需要使用JavaScript就可以扩展的话，这是一个怎样的技巧呢?
In a project I'm working on now I created a hero block twig template
在我正在进行的一个项目中，我创建了一个hero block twig模板
<div class="hero">
<img class="image" src="{{ bgImageSrc }}"
alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
#18
1
You can convert it with JS:
可以用JS进行转换:
$('.image-class').each(function(){
var processing = $(this).attr('src');
$(this).parent().css({'background-image':'url('+processing+')'});
$(this).hide();
});
#19
1
Some data I whould leave in HTML, but src better define in CSS:
有些数据我应该用HTML保存，但src最好用CSS来定义:
<img alt="Test Alt text" title="Title text" class="logo">
.logo {
content:url('../images/logo.png');
}
#20
0
If you are trying to add an image in a button dynamically based on the context of your project, you can use the ? take to reference the source based on an outcome. Here I am using mvvm design to let my Model.Phases[0] value determine whether I want my button to be populated with images of a lightbulb on or off based on the value of the light phase.
如果您试图根据项目的上下文动态地在按钮中添加图像，您可以使用?参考基于结果的源。这里我使用mvvm设计来让我的模型。相位[0]值决定我想要我的按钮是由一个灯泡的图像填充还是由它的光相位填充的。
Not sure if this helps. I'm using JqueryUI, Blueprint, and CSS. The class definition should allow you to style the button based on whatever you'd like.
不确定这是否有用。我使用JqueryUI、Blueprint和CSS。类定义应该允许您根据您想要的任何内容来设计按钮。
<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")"/>
#21
0
I would add this: background image could be also positioned with background-position: x y; (x horizontal y vertical). (..) My case, CSS:
我将添加这个:背景图像也可以定位于背景位置:x y;(x水平垂直)。(. .)我来说,CSS:
(..)
#header {
height: 100px;
background-image: url(http://.../head6.jpg);
background-position: center;
background-repeat: no-repeat;
background-color: grey;
(..)
}
(...)
#22
0
HTMl Code:
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>
Css Code:
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!!!' */);
}
I've been studying html after school for a few days, and wanted to know how to do this. Found out the background and then put 2 and 2 together. This works 100% I checked, if not make sure you fill in necessary things!!! We need to specify height, because without it there would be nothing!!! I'll leave this basic shell you can add-on.
我在放学后学习html已经有几天了，我想知道怎么做。找到背景，然后把2和2放在一起。这工作100%我检查过，如果不确定你填写了必要的东西!!我们需要指定高度，因为没有它，什么也没有!!我留下这个基本的外壳你可以添加。
Example:
例子:
<!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");
}
P.S. Yes I am a Linux user ;)
是的，我是一个Linux用户;
#23
0
Any method based on background or background-image is likely to fail when user prints the document with "print background colors and images" disabled. Which is unfortunately typical browser's default.
任何基于背景或背景图像的方法在用户打印禁用“打印背景颜色和图像”的文档时都可能失败。这是典型浏览器的默认设置。
The only print-friendly and cross-browser compatible method here is the one proposed by Bronx.
这里唯一支持打印和跨浏览器兼容的方法是Bronx提出的方法。
#24
-2
Just use HTML5 :)
只使用HTML5:)
<picture>
<source srcset="smaller.jpg" media="(max-width: 768px)">
<source srcset="default.jpg">
<img srcset="default.jpg" alt="My default image">
</picture>