gpt4 book ai didi

css - 我可以在不制作图像的情况下让彩色背景只占元素的 % 吗?

转载 作者:行者123 更新时间:2023-11-28 12:24:06 25 4
gpt4 key购买 nike

如果我想在我的网页顶部的背景中有一个蓝色条(所以 body 元素的背景),但我希望它的高度为 100 像素并跨越整个水平背景...有什么办法吗做到这一点而不用我想要的颜色制作 100px 的背景图像(宽度可能为 1px)并使其重复 x?

基本上,而不是做:

background: url("images/pagestripe.png") repeat-x;

我想这样做:

background: #FFCCFF 100px top left repeat-x;

这会给我一个 100 像素的颜色为 #FFCCFF 的背景,它从页面左上角开始并水平重复。

同样,如果我想让它重复 y,它会使 100px 成为宽度而不是高度。

定位标记可以表示偏移...

这可能吗?是否有我正在寻找的实际 CSS 代码?也许我离得不远了……

最佳答案

您可以使用 linear gradients 来做到这一点:

body {
background-image: -moz-linear-gradient(top, blue 100px, transparent 0);
background-image: -o-linear-gradient(top, blue 100px, transparent 0);
background-image: -webkit-linear-gradient(top, blue 100px, transparent 0);
background-image: linear-gradient(top, blue 100px, transparent 0);
}

编辑:这只是 CSS3。对于 CSS2,您可以尝试

body:before {
content: ' ';
display: block;
top: 0;
position: absolute;
height: 100px;
width: 100%;
background: blue;
}

关于css - 我可以在不制作图像的情况下让彩色背景只占元素的 % 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9219038/

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