我有一个图像元素,我使用CSS添加了不同的背景图像.
img {
background-image: url('http://i.stack.imgur.com/5eiS4.png') !important;
}<img src="http://i.stack.imgur.com/smHPA.png" />我想在图像元素中显示CSS指定的背景图像(Stack Exchange徽标),而不是由src属性指定的图像(Stack Overflow徽标).
这可能吗？我有一种情况,我不能改变HTML或使用JavaScript,我正在寻找替代品.
Gök*_*urt 28
我找到了一个适用于所有主流浏览器(在IE8 +中测试)的解决方案.
img {
background-image: url('http://i.stack.imgur.com/5eiS4.png') !important;
position: relative;
overflow: hidden;
width: 32px;
height: 36px;
padding: 32px 36px 0 0;
box-sizing: border-box;
}<img src="http://i.stack.imgur.com/smHPA.png"/>它有一些技巧.您必须将图像的实际宽度和高度指定为宽度和高度.然后分别将填充左侧和顶部设置为该宽度和高度.我不知道溢出是否相关,只是添加了它.盒子大小必须是边框.
编辑:解决方案更小.其中一个padding-left或padding-top足够,没有必要overflow:hidden.摆弄它.
小智 25
该object-positionCSS属性,这是由Chrome和Firefox的支持,提供了一个相当直接的解决了这个问题.此属性用于在其元素内偏移本机图像的呈现位置.该规范有助于注意......
未被替换元素覆盖的框区域将显示元素的背景.
...所以只要我们提供一个偏移量来确保原生图像完全超出范围,背景就会变得可见.例如:
img {
object-position: -99999px 99999px;
background-image: url('http://i.stack.imgur.com/5eiS4.png');
}<img src="http://i.stack.imgur.com/smHPA.png" />这在每个浏览器中都不可能,但在WebKit和Blink浏览器(例如Safari和Chrome)中,可以通过使用该content属性替换元素的指定src图像内容来实现<img>.使用content: none完全删除它似乎不起作用,但我们可以用透明GIF替换它以达到相同的效果.
这将改变图像的内在尺寸(在这种情况下为1x1),因此您还需要显式添加width,height如果尚未指定.
img {
content: url('data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
width: 32px;
height: 36px;
background-image: url('http://i.stack.imgur.com/5eiS4.png');
}<img src="http://i.stack.imgur.com/smHPA.png" />小智 -1
不要使用图像。div将's 与背景图像一起使用
<img>是一个 HTML 标签。CSS 的作用是为其添加样式，而不是更改其属性。下面提到的是一种解决方法。但我不会推荐它。这不是一个非常干净的方法。
示例代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.style2{background:url('bg.jpg') 0 0 repeat !important;}
</style>
</head>
<body>
<div style="background:url(img.png) 0 0; width:728px; height:90px;" class="style2" />
</body>
</html>