是否有可能在CSS中设置一个img标签的src属性的等效?

是否可以在CSS中设置src属性值? 在大多数情况下，我们这样使用它:

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

我希望它是这样的

<img class="myClass" />

.myClass {
    some-src-property: url("pathTo/myImage.jpg");
}

我想知道是否有一种方法可以做到这一点，而不使用CSS中的background或background-image属性。

当前回答

当用户打印“打印背景颜色和图像”时，任何基于背景或背景图像的方法都可能失败。不幸的是，这是典型浏览器的默认设置。

这里唯一的打印友好和跨浏览器兼容的方法是Bronx提出的方法。

2014-09-19 09:55:41

其他回答

为了重申之前的解决方案并强调纯CSS实现，这里是我的答案。

如果您从另一个站点获取内容，因此无法控制所交付的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);
}

2013-01-16 15:15:55

使用内容:url(“image.jpg”)。

完整的工作方案(现场演示):

<！doctype html > <时尚> .MyClass123 { 内容:url(“http://imgur.com/SZ8Cm.jpg”); ｝ > < /风格 < img类= " MyClass123 " / >

测试和工作:

Chrome 14.0.835.163 Safari你 Opera 10.6 Firefox 100及更新版本

已测试且不工作:

FireFox 40.0.2(观察开发人员网络工具，您可以看到URL加载，但图像不显示) Internet Explorer 11.0.9600.17905 (URL从未加载)

2012-07-14 14:51:21

这里有一个很好的解决方案-> http://css-tricks.com/replace-the-image-in-an-img-with-css/ 正反两方面: (+)与具有相对宽度/高度的矢量图像(RobAu的答案不处理的事情) (+)是跨浏览器的(也适用于IE8+) (+)只使用CSS。所以不需要修改img src(或者如果你没有权限/不想改变已经存在的img src属性)。 (-)抱歉，它使用后台CSS属性:)

2013-10-01 10:39:59

我发现了一个比建议的解决方案更好的方法，但它确实使用了背景图像。兼容方法(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 */

}

2012-05-25 09:11:08

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代码:

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!!!' */);
}

放学后我一直在学习html几天，想知道如何做到这一点。找出背景，然后把两者结合起来。这工作100%我检查，如果不确保你填写必要的东西!! 我们需要指定高度，因为没有它就什么都没有!! 我留下这个基本的外壳，你可以添加。

例子:

 <!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");
}

附注:是的，我是Linux用户;)

2013-05-31 02:58:06

是否有可能在CSS中设置一个img标签的src属性的等效?

推荐文章

最新文章

标签