背景颜色看起来如此平坦?

时间:2013-12-07 20:43:33

标签: html css colors background-color

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> About </title>
</head><style>
body
{
background-color:#00FFFF;
}
</style>

我知道如何添加背景颜色,但它看起来如此平坦,所以1990年正在寻找..我将如何添加像颜色的抛光?

3 个答案:

答案 0 :(得分:2)

这是一个人们在这里难以回答的问题,因为它非常含糊,很可能已多次发布。我会给你一个警告的答案,我希望你能在下一次发布一个已被多次回答的问题之前搜索类似问题的答案。

显然,您会将该背景设为渐变,并简单地从一种颜色淡化为另一种稍微更浅或更暗的颜色。以下是适用于大多数浏览器的代码:

    html {
    background-image: linear-gradient(#00FFFF, #00b2b2);
    box-shadow: inset 0 0 100px hsla(0,0%,0%,.3);
    min-height: 100%;

我已经在这里制作了一个codepen供你玩。有许多不同的方法可以将此代码作为css包含到您的站点中,您可能还需要查看涵盖所有浏览器的解决方案。请再次搜索此网站,因为答案已在此处。

http://codepen.io/httpJunkie/pen/HcGpq

答案 1 :(得分:0)

答案 2 :(得分:0)

渐变会看起来更漂亮

    <html>
    <head>
    <meta charset="utf-8">
    <title> About </title>
    </head><style>
    body {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
    }
    </style>

此代码适用于chrome和safari。要获得跨浏览器兼容性,您可以在http://www.colorzilla.com/gradient-editor/

在线创建颜色