CSS背景渐变图片问题

Posted 2023-05-13

用一张像素比较小的渐变图片做背景，上半部分色比较深，下半部分色比较淡，当页面的内容比较多时，背景重复，只是只想重复下半部分色比较淡的，要如何来做。想不出来吖，如果是CSS3可以多张图片作背景，现在是用CSS2，要怎么做到。

上下渐变的图片做背景在背景重复的时候有明显的过渡不平滑，除非将图片设置css样式background: fixed;让背景不动。

其实可以这样，你将背景图片设置高一点，大概300像素-400像素高度左右，然后以渐变图片最下面的颜色为背景色，这样就可以无限背景平铺下去。

参考资料：个人心得

参考技术A

css设置图片渐变一般都是保持图片以“最小单元”为准则：

图片渐变切图的时候是以最小为准则，比如垂直方向的纯颜色渐变可以使用一像素的竖直图片作为渐变背景“最小单元”。


如果兼容程度允许，纯色渐变背景可以使用css3的渐变样式，如background: linear-gradient(left top, red , blue); 这样可以减少切图量，加快网页加载速度，缺点是不兼容ie8及以下浏览器，主流浏览器需要添加前缀。

背景图片以最小“单元”平铺，是加快网页访问速度的方法之一。

参考技术B 用浅色部分做背景色，背景重复的部分只做x轴重复就可以了； 参考技术C CSS3目前是许多济览器不支持。

IE 9 中带有渐变背景的 CSS 菜单上的 Z 索引或溢出问题

【中文标题】IE 9 中带有渐变背景的 CSS 菜单上的 Z 索引或溢出问题

【英文标题】：Z-index or overflow issue, on a css menu, with gradient background in IE 9

【发布时间】：2012-11-26 15:17:20

【问题描述】：

当在菜单容器上使用渐变背景时，尝试显示带有<ul> 和<li> 的css:hover 菜单时，IE 会出现另一个问题。

悬停 li 在使用渐变背景时被截断，并且在没有渐变背景的情况下正确显示。

它适用于 Chrome 和 FF...

Demo with gradient

Demo without gradient

带有渐变的源（无需删除 .bg 类）

HTML

<div class="header bg">
<div id="menu">
    <ul>
       <li><a href="#">Menu</a>
            <ul>
               <li><a href="#">Sub-menu 1</a></li>
               <li><a href="#">Sub-menu 2</a></li>
               <li><a href="#">Sub-menu 3</a></li>
               <li><a href="#">Sub-menu 4</a></li>                
               <li><a href="#">Sub-menu 5</a></li>
            </ul>
        </li>
    </ul>
</div>
</div>

CSS

.header position:fixed;top:0px;right:0px;left:0px;z-index:10;height:110px;
.bg background-image: -moz-linear-gradient(top, #CCCCCC, #888888);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#888888));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC,endColorstr=#888888);
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCCCCC,endColorstr=#888888);    


#menu width:960px;z-index:20;position:relative;height:40px;
#menu ul 
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:center;
 
#menu li 
background:#009966;
 float:left;
 padding:0;
 margin-right:1px;

#menu li a 
font-size:16px;display:block;width:191px;line-height:40px;color:#FFF;text-decoration:none;
 
#menu li:hoverbackground:#FF6600;
#menu ul li ul display:none;
#menu ul li:hover ul display:block;
#menu li:hover ul li float:none;margin:0;padding-bottom:0px;
#menu li ul li a  text-align:left;text-indent:10px;font-size:12px;background:none;color:#000;
#menu li ul li a:hover 

任何人都可以帮助我如何使它与 IE 一起工作？

【问题讨论】：

对不起... Internet Explorer 9

头部需要修复吗？

是的，它需要修复，但没关系，修复或绝对问题是一样的 :-(

实际上，如果我从标题中删除固定位置，问题就会消失。

不适合我...但无论如何标题必须是固定位置。

【参考方案1】：

没有人找到解决方案？ ;-)

问题是通过使用 z-index 属性产生的。

这很疯狂，但是IE不喜欢这种情况，我不知道为什么，如果有人能找到好的理由，请告诉我......

Demo with gradient and without the z-index.

换行

.header position:fixed;width:100%;left:0px;height:110px;

【讨论】：

哈！刚刚发现并打算发布:)但我不知道为什么。此外，将菜单上的position: relative 更改为position:fixed 会显示菜单，但您不能选择标题之外的菜单项。可能是同一个问题...

这个我快疯了！因为我需要固定的位置。当您需要使它们与每个浏览器一起工作时，一切都变得如此复杂。当你也为手机制作它们时，它会更复杂！ position:fixed 不适用于例如 iPhone 和 iPad...