是否可以src在CSS中设置属性值？目前,我正在做的是:
<img src="pathTo/myImage.jpg"/>
我希望它是这样的
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
我想这样做而不使用CSS中的background或background-image:属性.
Pac*_*ier 843
完整的解决方案(Live Demo):
<!doctype html>
<style>
.MyClass123{
content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>
<img class="MyClass123"/>经过测试和工作:
经过测试和不工作:
Rob*_*bAu 176
我今天发现了一个解决方案(适用于IE6 +,FF,Opera,Chrome):
<img src='willbehidden.png'
style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
这个怎么运作:
background-size例如:background-size:cover;它使您的图像适合分配的空间.它也适用于提交输入图像,它们保持可点击状态.
观看现场演示:http://www.audenaerde.org/csstricks.html#imagereplacecss
请享用!
CSᵠ*_*CSᵠ 107
CSS2的:after伪元素或较新的语法::after从CSS3与沿content:属性:
第一个W3C建议书:级联样式表,2级CSS2规范 1998年5月12日
最新W3C建议书:选择器级别3 W3C建议书 2011年9月29日
这种方法追加仅仅满足后一个元素文档树内容.
注意:一些浏览器通过实验content性地直接在一些元素选择器上呈现属性,而不管最新的W3C推荐定义:
适用于:
:before和:after伪元素
CSS2语法(向前兼容):
.myClass:after {
content: url("somepicture.jpg");
}
CSS3选择器:
.myClass::after {
content: url("somepicture.jpg");
}
默认渲染:原始大小(不依赖于显式大小声明)
此规范未完全定义:替换元素(例如HTML中的IMG)之前和之后的交互.这将在未来的规范中更详细地定义.
但即使是在写这篇文章的时候,用行为<IMG>标签尚未定义,虽然它可以被用在黑客攻击和不符合标准的方式,与使用<img>不推荐!
伟大的候选人方法,见结论......
background-image:财产:
第一个W3C建议:层叠样式表,1级, 1996年12月17日
此属性设置元素的背景图像.设置背景图像时,还应设置在图像不可用时使用的背景颜色.当图像可用时,它覆盖在背景颜色的顶部.
这个属性从CSS开始就已经存在,但它值得一提.
默认渲染:原始大小(无法缩放,仅定位)
但是,
background-size:通过允许多个缩放选项,CSS3的属性得到了改进:
最新的W3C状态:候选推荐 CSS背景和边界模块级别3 2014年9月9日
[length> | <percentage> | auto ]{1,2} | cover | contain
但即使使用此属性,也取决于容器大小.
仍然是一个很好的候选方法,见结论......
CSS2的list-style:财产以及display: list-item:
第一个W3C建议:层叠样式表,2级CSS2规范 1998年5月12日
list-style-image: 属性设置将用作列表项标记的图像(项目符号)
列表属性描述了列表的基本可视化格式:它们允许样式表指定标记类型(图像,字形或数字)
display: list-item- 此值使元素(例如,<li>在HTML中)生成主块框和标记框.
.myClass {
display: list-item;
list-style-position: inside;
list-style-image: url("someimage.jpg");
}
速记CSS :( <list-style-type> <list-style-position> <list-style-image>)
.myClass {
display: list-item;
list-style: square inside url("someimage.jpg");
}
默认渲染:原始大小(不依赖于显式大小声明)
限制:
继承将把"list-style"值从OL和UL元素传递给LI元素.这是指定列表样式信息的推荐方法.
它们不允许作者为列表标记指定不同的样式(颜色,字体,对齐等)或调整其位置
此方法也不适用于<img>标记,因为无法在元素类型之间进行转换,这是有限的,不兼容的hack,不适用于Chrome.
好的候选人方法,见结论......
CSS3的border-image:房产推荐:
最新的W3C状态:候选推荐 CSS背景和边界模块级别3 2014年9月9日
甲背景型依赖于在一个比较奇特方式指定尺寸的方法(用于该用途的情况下,没有定义)和回退边框属性迄今(例如border: solid):
请注意,即使它们永远不会导致滚动机制,也可能会由祖先或视口剪切开始图像.
这个例子说明了图像被构成仅作为右下角装饰:
.myClass {
border: solid;
border-width: 0 480px 320px 0;
border-image: url("http://i.imgur.com/uKnMvyp.jpg") 0 100% 100% 0;
}
适用于:所有元素,但内部表元素除外
border-collapse: collapse
它仍然不能改变一个<img>标签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"标准传播后要考虑的良好候选方法.
CSS3的element()符号工作草案值得一提:
注意:该
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">
我们将使用呈现内容两者之一的隐藏图像来改变图像背景中的#img1基础上,ID选择通过CSS:
#img1 {
width: 480px;
height: 320px;
background: -moz-element(#pic1) no-repeat;
background-size: 100% 100%;
}
.hide {display: none}
注意:它是实验性的,仅适用-moz于Firefox中的前缀,仅适用于background或background-image属性,也需要指定大小.
话虽如此,让我们探索适合图像显示的HTML标签:
<li>元素[HTML4.01 +]list-style-imagewith display: list-item方法的完美用法.
该<li>元素可以是空的,可以流动的内容,它甚至允许真实省略</li>结束标记.
.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>限制:难以定型(width:或float:可能有帮助)
<figure>元素[HTML5 +]图元素表示一些流内容,可选地带有标题,它是自包含的(如完整的句子),并且通常从文档的主流中引用为单个单元.
该元素有效且没有内容,但建议包含a <figcaption>.
因此,该元素可用于注释插图,图表,照片,代码清单等.
默认渲染:元素右对齐,左右填充!
<object>元素[HTML4 +]要包含图像,作者可以使用OBJECT元素或IMG元素.
该data属性是必需的,可以将有效的MIME类型作为值!
<object data="data:x-image/x,"></object>
注意:使用<object>CSS 中的标记的一个技巧是设置一个 自定义的有效MimeType,x-image/x后跟没有数据(值在所需的逗号后没有数据,)
默认渲染:300 x 150px,但可以在HTML或CSS中指定大小.
<SVG>标签<canvas>元素[HTML5 +].该
width属性默认为300,height属性默认为150.
<input>与元素type="image"限制:
...该元素应该看起来像按钮,表示该元素是一个按钮.
当没有文字时,Chrome会跟随并呈现一个4x4像素的空方格
部分解决方案,设置value=" ":
<input type="image" id="img1" value=" ">
还要注意HTML5.1中即将推出的<picture>元素,这是目前的工作草案.
Emm*_*ery 25
我用这个CSS的空div解决方案:
#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>
Eri*_*icG 14
我找到了比建议的解决方案更好的方法,但确实使用了背景图像. 符合方法(无法确认IE6) 致谢: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;
}
没有看到旧图像,新的图像被视为预期.
以下简洁的解决方案仅适用于webkit
img[src*="pathTo/myImage.jpg"] {
/* note :) */
content:'';
display:inline-block;
width: 20px;
height: 20px;
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
}
小智 13
他们是对的.IMG是一个内容元素,CSS是关于设计的.但是,当您为设计目的使用某些内容元素或属性时呢？我在我的网页上有IMG,如果我改变样式(CSS)必须改变.
那么这是一个用于定义CSS风格的IMG表示(没有真正的图像)的解决方案.
它像一个魅力:)
小智 11
这是一个非常好的解决方案 - > http://css-tricks.com/replace-the-image-in-an-img-with-css/
Pro(s)和Con(s):(
+)适用于矢量具有相对宽度/高度的图像(RobAu的答案不能处理的东西)
(+)是跨浏览器(也适用于IE8 +)
(+)它只使用CSS.因此无需修改img src(或者如果您没有访问/不想更改已存在的img src属性).
( - )对不起,它确实使用了后台css属性:)
不,你不能通过CSS设置图像src属性.你可以得到的最接近的是,background或者background-image.我不建议这样做,因为它有点不合逻辑.
但是,如果您定位的浏览器能够使用它,则可以使用CSS3解决方案.content:url 按照Pacerier的回答中所述使用.您可以在下面的其他答案中找到其他跨浏览器解决方案.