多个背景图像和背景颜色

发布于 2024-10-26 20:33:51 字数 671 浏览 5 评论 0原文

假设我想在 CSS 中渲染一个箭头，它应该有一个头部、一个尾部和灵活的宽度，以便它可以包含文本。我当然可以创建多个 div 来获得我想要的内容，但是在 CSS3 中如何做到这一点呢？

我可以使用多个背景图像：

div.arrow{
    background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat;
}

html：

<div class="arrow">This text is on a transparent background</div>

这给了我一个带有箭头和尾部以及透明中间部分的 div 。似乎不可能指定中间部分的颜色。

只需一张背景图像，您就可以做到这一点：

div.arrow{ background: red url('some_image.png') no-repeat; }

我知道这在很多方面都是可行的，但是背景颜色属性真的从速记定义中丢失了吗？

原文

Suppose I want to render an arrow in CSS, which should have a head, a tail and flexible width so it can contain text. I can of course create multiple divs to get what I want, but how can this be done in CSS3?

I can use multiple background images:

div.arrow{
    background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat;
}

The html:

<div class="arrow">This text is on a transparent background</div>

This gives me an div with an arrow-head and tail, and a transparent middle-section.
It does not seem possible specify the color to the middle section.

With only one background-image, you could do this:

div.arrow{ background: red url('some_image.png') no-repeat; }

I know this is doable in lots of ways, but is the background-color property really lost from the shorthand definition?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

写给空气的情书 2024-11-02 20:33:51

不，它并没有从速记声明中完全丢失。您仍然可以指定背景颜色，但仅限最后（中间）层（无论您是否将图像放在那里）：

div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat, 
                red;
}

请注意，对于您的场景，您的图像可能必须具有完全不透明的背景。背景颜色将显示在图像的任何透明像素下方。

jsFiddle demo

然而，单独声明 background-color 可能对您更好因为它允许您基于相同的背景图像使用不同的颜色（如果您擅长使用图像部分的透明像素填充 CSS 背景颜色）：

div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat;
}

/* Assuming your red arrow has this ID */
#red {
    background-color: red;
}

方案， net/BoltClock/xw5r7/1" rel="noreferrer">jsFiddle 演示

No, it's not exactly lost from the shorthand declaration. You can still specify the background color, but only for the last (middle) layer (regardless of whether you put an image there):

div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat, 
                red;
}

Note that for your scenario, your images may have to have completely opaque backgrounds. The background color will show under any transparent pixels of your images.

jsFiddle demo

Declaring background-color separately, however, may be much better for your scenario as it lets you use different colors based on the same background images (if you're good with transparent pixels on the parts of your images to be filled with the CSS background color):

div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat;
}

/* Assuming your red arrow has this ID */
#red {
    background-color: red;
}

jsFiddle demo

回复收藏 0 原文

花桑 2024-11-02 20:33:51

我发现使用多个背景图像对于此类事情来说是有问题的。您是否考虑过使用 :before 和 :after 伪元素？我写了一个简单的例子：

<style>
    .arrow { display:block; margin:0; padding:0; width:200px; height:45px; line-height:45px; text-align:center; background:#ddd; }
    .arrow:before { float:left; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
    .arrow:after { float:right; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
</style>

<div class="arrow">This text is on a transparent background</div>

只需将 :before 和 :after 声明中的背景颜色替换为您想要的箭头图像。

I find using multiple background images to be problematic for things like this. Have you considered using the :before and :after pseudo elements? I wrote up a quick example:

<style>
    .arrow { display:block; margin:0; padding:0; width:200px; height:45px; line-height:45px; text-align:center; background:#ddd; }
    .arrow:before { float:left; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
    .arrow:after { float:right; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
</style>

<div class="arrow">This text is on a transparent background</div>

Just replace the background color in the :before and :after declarations to the arrow images you want.

回复收藏 0 原文