html - CSS : Overwriting using style tag on JSP page

Question

我在开发后端时根本不使用 CSS，所以我很少接触它。

我有一个使用多个 CSS 文件设置样式的网页，但屏幕被拉伸(stretch)到整个页面。我想要的是让屏幕更薄一点，并从 .PNG 文件中添加背景。当我将以下代码添加到我的 .JSP 页面以加载 .PNG 文件时，什么也没有发生

<style type="text/css">
html { 
  background: url(<c:url value="/resources/blue-back-grade-2.png"/>) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.box{-moz-box-shadow: 10px  10px  5px  #555555;-webkit-box-shadow: 10px  10px  5px  #555555;box-shadow: 10px  10px  5px  #555555;}
a {
    color: #04315E;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    font-size: small;
    text-decoration: none;
    a:hover 
}
.hov { color: #04315E; }
.hov:hover { text-decoration: underline; }
.hov:active { color: #04315E; }
.hov:visited { color: #04315E; }

.no-hov { color: #04315E; }
.no-hov:hover { text-decoration: none; }
td img {
    display: block;
}
td img {
    display: block;
}
td img {
    display: block;
    text-align: center;
    color: #FFFFFF;
}td img {display: block;}
</style>

是页面需要更薄以便拾取背景图像还是此 CSS 代码在其他地方被覆盖？

Answer 1

如果图像的 url 是动态的，则使用 javascript 或 jquery 设置它，否则将其作为相对 url 存储在外部 css 文件中。

阅读更多关于 CSS Background 的信息

CSS:

body {
    background-image: url("paper.gif");
}

如果url是动态的，如何设置正文背景图片:

$('body').css('background-image','url(image_url)');

使用JQuery设置页面背景图片的示例代码。

#containier{
   height : 150px;
   width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containier"></div>

<script>
$('#containier').css('background-image','url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTn2GsaEpA1X8Omt-dxlm7aYLS0CIgF0N2HDqVmtWLEr2uD_WM4)');
</script>