是否有可能在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属性。

当前回答

我想补充一点:背景图像也可以用background-position: x - y来定位;(x水平y垂直)。(. .) 我的例子，CSS:

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

2013-01-17 14:28:23

其他回答

为了重申之前的解决方案并强调纯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

有些数据我会留在HTML中，但最好在CSS中定义src:

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

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

2018-01-30 02:04:09

使用HTML5就可以了:)

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

2016-04-27 20:02:28

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

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

2014-09-19 09:55:41

我想补充一点:背景图像也可以用background-position: x - y来定位;(x水平y垂直)。(. .) 我的例子，CSS:

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

2013-01-17 14:28:23

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

推荐文章

最新文章

标签