Question

我根本不使用CSS，因为我开发了后端，因此我很少接触它。

我有一个使用多个CSS文件设置样式的网页，但屏幕在整个页面上展开。我想要的是使屏幕更薄一些，并从.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");
}

如果网址是动态的，如何设置正文背景图片：

$('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>

CSS：在JSP页面上使用样式标记覆盖

1 个答案: