纯色背景渐变

Posted 2023-05-08

【中文标题】纯色背景渐变

【英文标题】：background gradient with solid color

【发布时间】：2013-07-29 06:22:04

【问题描述】：

我必须执行以下操作： div 的顶部是渐变的图像，然后在底部继续作为纯色。我可以用简单的 CSS 做到这一点吗？我知道以下内容无效。

background: url(img/right_column_bg_top.png) no-repeat rgba(10,26,39,1) top 225px;

注意：图片填充的前 225px 应该没有背景色

【参考方案1】：

据我所知，纯色需要使用渐变，这样才能正确设置。

CSS 将是：

.imgbg 
   width:255px;
    height:355px;
   background:  url('http://blue2.hu/danone/nogravity/img/right_column_bg_top.png'), linear-gradient(90deg, #f7d8e8, #f7d8e8);
    background-position: 0px 0px, 0px 112px;
    background-repeat: no-repeat, no-repeat;
    background-size: 255px 112px, 255px 233px;

这里是your updated fiddle

基本支持应该适用于支持多种背景的浏览器，唯一的问题是 IE colozilla 以获得修复。

【讨论】：

嗯，这确实是我正在寻找的东西，只剩下 2 个问题：这是如何跨浏览器的？其次，这是如何在动态高度 div 中工作的？我问这个是因为，您使用了 background-size 属性。 - 我刚刚删除了该属性，它对我有用。

我已编辑答案以包含跨浏览器信息。关于图像大小，我想不说明图像的大小应该不是问题，渐变也是如此，但我不太确定。

【参考方案2】：

我会做以下事情：

#myDiv background: #f7d8e8 url('/img/right_column_bg_top.png') repeat-x ;

这只会将您的背景图片放在 div 的顶部；其余部分将是您为 div 的整个背景选择的颜色。

【讨论】：

好吧，你试过了吗？我正在使用 chrome，它会将颜色放在任何地方，甚至在图像下方，它是透明的。

可能我没看懂你的问题，但是把颜色放在图片下面有什么问题呢？如果它是与背景相同的颜色的渐变。查看我前段时间创建的这个网站：http://mychinesephrases.com 我将渐变放在body 对象上。

看看这个，我的图片在小提琴中。现在你可以看到粉红色在图像下方 .imgbg width:350px;高度：300px； background:#f7d8e8 url('blue2.hu/danone/nogravity/img/right_column_bg_top.png') 我想要的是，粉红色应该只在图像结尾下方开始。

对不起，我刚开始使用小提琴，这是我编辑的链接：jsfiddle.net/YPcVB/1

好的，现在我明白你的目标是什么了 :) 看起来你从上面的 AnaMaria 那里得到了答案。我可能会为此使用嵌套的 DIV。

【参考方案3】：

看看这个小提琴，告诉我这是不是你想要的。

FIDDLE

html

<div class="imgbg"></div>

CSS

.imgbg 
   width:255px;
    height:355px;
   background:#f7d8e8  url('http://placehold.it/255x255') no-repeat;