Question

我已经看到了这些答案：this，this，this和this。

但它没有帮助我的计划在这里：http://jsfiddle.net/nav9/6VeB7/9/

两个问题：
1.将此类背景代码放在html标记或head标记中而不是body标记内是否有意义？
2.如何在背景图像上获得渐变？当我将背景图片放在html标签和head标签中的渐变中时，它可以正常工作，但我希望两者都在同一个标签中。

CSS：

body 
{
    width: 100%;
    height: 100%;
    margin: 0px 0px 0px 0px;
    /*background: radial-gradient(rgba(45,255,27,0.8), rgba(255,162,12,0.87), rgba(14,12,12,1));*/
    background: radial-gradient(rgba(45,255,27,0.8), rgba(255,162,12,0.87), rgba(14,12,12,1));/*, url("images/starTile.png") repeat;*/
    background-image: url("images/starTile.png") repeat;    
    position: fixed;
}

HTML：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<link rel="stylesheet" type="text/css" href="Styles.css">
</body>
</html>

更新
这就是它不重复的原因：我试图重复starTile，当我使用repeat时渐变不起作用。但是，如果我使用no-repeat，我可以看到渐变以及单个starTile图像。

body
{
    background-image: url('images/starTile.png'), radial-gradient(rgba(45,255,27,0.8), rgba(255,162,12,0.87), rgba(14,12,12,1));
    background-repeat: repeat, no-repeat;
    background-position: left center, left top;
    background-size: auto, 100% 100%;
}

CSS：如何同时应用背景平铺图像和径向渐变？

0 个答案: