gpt4 book ai didi

css - 多个背景图像和一个背景颜色

转载 作者:技术小花猫 更新时间:2023-10-29 10:27:49 24 4
gpt4 key购买 nike

假设我想在 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; }

我知道这在很多方面都是可行的,但是 background-color 属性真的从速记定义中丢失了吗?

最佳答案

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

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;
}

jsFiddle demo

关于css - 多个背景图像和一个背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5427371/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com