简体   繁体   English

Css左侧的div更明亮?

[英]Css left side of a div brighter?

I have a div which is a wrapper of my half website and on the left side there's a category list. 我有一个div,它是我的半网站的包装,在左侧有一个类别列表。 The wrapper itself is in grey color. 包装纸本身为灰色。

What I want is that it would switch from grey color to white. 我想要的是它会从灰色切换到白色。 Here's an example image how I'd like it to be: 这是我想要的示例图像:

在此输入图像描述

Is there a solution to this? 有针对这个的解决方法吗?

EDIT 编辑

If it will be of any help here's my wrapper's css: 如果它有任何帮助,这是我的包装的css:

#wrapper{
width: 980px;
margin: 0 auto;
background: #f3f3f3;
}

If I understand you correctly, you're looking for a way to add a gradient. 如果我理解正确,你正在寻找一种添加渐变的方法。 Below you find the CSS for a gradient going from left to right with the colors #FFFFFF to #F3F3F3 . 下面是一个从左到右的渐变的CSS,颜色为#FFFFFF#F3F3F3

Please be aware, that gradients haven't been standardized yet, and many browsers have their own implementiation. 请注意,渐变尚未标准化,许多浏览器都有自己的实现。 This is why there are multiple directives (prefixed -o- for Opera, -moz- for Mozilla, etc.): 这就是为什么有多个指令(Opera的前缀为-o-,Mozilla的-moz-等):

#wrapper {
    ...
    background-image: 
        linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
    background-image: 
        -o-linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
    background-image: 
        -moz-linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
    background-image: 
        -webkit-linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);
    background-image: 
        -ms-linear-gradient(left , rgb(255,255,255) 35%, rgb(243,243,243) 84%);

    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.35, rgb(255,255,255)),
        color-stop(0.84, rgb(243,243,243))
    );
}

Here's a convenient CSS Gradient Generator 这是一个方便的CSS Gradient Generator

What you need are gradients. 你需要的是渐变。
Try this generator or just read about them 试试这个生成器或只是阅读它们

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM