使用背景图片和颜色相同的元素

我想使用背景图像和颜色相同的元素但ID好好尝试一下工作，甚至我在这里使用像this question 使用背景图片和颜色相同的元素

2012-02-24 palAlaa

你的CSS工作正常，无论是图像和背景颜色坐在一个容器内，因为他们是相同的颜色，你实际上看不到箭头。

来解决它的最好方法是使用一个外部的div包裹你的头元素，像这样：

<div class="outer"><h1></h1></div>

然后风格与相应的CSS：

div { 
    float: right; 
    width: 198px; 
    background-image:url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png);   
    background-position: 0px; 
    background-repeat: no-repeat; 
    margin-top:21px; 
} 

h1{ 
    color:white; 
    font-size: 170%; 
    font-weight: normal; 
    font-family: arial; 
    width:189px; 
    height:33px; 
    line-height: 33px; 
    background-color: #b21f23; 
    float:right; 
}

所以要澄清，外部div稍大，并包含背景图像对齐的左侧，然后标题填充所有剩余的空间与背景颜色。

来源

2012-02-24 10:19:07 DNJohnson

这可以工作，但从语义div没有手段！ – palAlaa 2012-02-24 10:36:51

这是正确的，div's并不是一个特定的语义元素，它们主要是为了在视觉上布局页面而存在。如果你的箭头纯粹是出于美学目的，那么div是合适的。如果你的箭头应该向用户传达实际意义（即盲人用户应该意识到这一点），那么更合适的解决方案是将箭头嵌入到具有alt属性的img元素中，并将h1浮动在它旁边。 – DNJohnson 2012-02-24 10:51:42

试试这个

background: url(http://s14.postimage.org/nitv9x7ct/top_Arrow.png) no-repeat left center #b21f23;

这将增加背景图像和其他一切将是你的背景颜色

来源

2012-02-24 10:11:21 clem

同样的问题，这是它http://jsfiddle.net/xdkwB/1/ – palAlaa 2012-02-24 10:12:55

您已将背景色设置为与图像相同的颜色。所以它就在那里，你只是看不到它，因为它混合在一起。

来源

2012-02-24 10:13:23 ChrisPatrick

http://jsfiddle.net/xdkwB/12/ – ChrisPatrick 2012-02-24 10:18:22

-2

你是箭头是te背景相同的颜色。您可以使用background-position来定位背景，并将负值留在框外：

来源

2012-02-24 10:13:45

不，一旦它在盒子外面，它将不可见。 – ChrisPatrick 2012-02-24 10:19:35

-1这将简单地从视图 – Curt 2012-02-24 10:21:16

我不认为只用一个元素样式就可以得到您想要的结果。

您可能需要在元素外部有background-image，这是不可能的。

或者你需要的background-color不填充所有元素，这也是不可能的

最好的选择IMO，将与第一一background-image两个元素，并background-color与文本第二

http://jsfiddle.net/xdkwB/11/

实施例：

http://jsfiddle.net/xdkwB/13/

例浮动权：

http://jsfiddle.net/xdkwB/14/

来源

2012-02-24 10:15:03 Curt

mmm隐藏'background-image'我通常为父元素和背景图像创建子元素的背景颜色，但这种情况不需要子元素！ – palAlaa 2012-02-24 10:19:33

使用背景图片和颜色相同的元素

回答

相关问题