html和CSS圖像分層和不透明度
[英]html and CSS image layering and opacities
問題描述
我有一個帶有漸變背景的html頁面。 然后我在前面有一個圖像。 我希望此圖像的不透明度為0.2。 然后我有一個表格。 字段集的不透明度設置為0.95。 但是，當我運行腳本時，整個頁面（標頭除外）的不透明度為.2。如何在僅圖像為0.2且表單仍為0.95的情況下獲取它，我嘗試了各種定位，但似乎無法獲得它。 我的css和html代碼以及在.2-3處的圖像的屏幕截圖均已附加。 CSS底部的2個命令是im在我的命令中使用的命令。非常感謝您的幫助。 謝謝
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="Scripts/Global.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/Design.css">
</head>
<body>
<div id="body"><br></div>
<div id="header">
<h1>Waste Entry Form</h1>
<p id="Date"></p>
<div id="headerIcon"><img src="Images/Logos/Logo5.jpg" style="width:90px;height:40px"></div>
</div>
<div id="content"> </div>
<div id="wrapper">
<center>
<div>
<form action="DataEntry.asp" method="post" class="formstyle">
<fieldset>
<table border="0px">
<tr>
<td colspan = "2" id="formHeader">
Select Shift
</td>
</tr>
<tr>
<td class="spaceUnder" id="formBody">Day Shift
<input type="radio" name="Shift" id="dayShift" value="Day Shift">
</td>
<td align="center" class="spaceUnder" id="formBody">Evening Shift
<input type="radio" name="Shift" id="eveningShift" value="Evening Shift">
</td>
</tr>
<tr>
<td colspan = "2" id="formHeader">
Select Date and Time
</td>
</tr>
<tr>
<td class="spaceUnder" id="formBody">Date: <input type="date" id="theDate"></td>
<td align="center" class="spaceUnder" id="formBody">Time: <input type="time" value="22:15:00"></td>
</tr>
<tr>
<td colspan = "2" id="formHeader">
Enter Equipment & Waste
</td>
</tr>
<tr>
<td class="spaceUnder" id="formBody">
Type:
<select id="formSelect">
<option value="">Choose Equipment</option>
<option value="Raw Material">Raw Material</option>
<option value="Spiral Freezer">Spiral Freezer</option>
<option value="Palletizer">Palletizer</option>
<option value="Bagger">Bagger</option>
<option value="Fryer">Fryer</option>
</select>
</td>
<td class="spaceUnder" id="formBody">Scrap Waste lbs:
<input type="number" name="quantity" min="1" max="50">
</td>
</tr>
<tr>
<td align ="right" colspan = "2"> <input class="SaveIcon" title="Save" type="button1" onclick="SaveDataEntry()" style="background-image: url(Images/Save.png); cursor:pointer"></input></td>
</tr>
<br>
</form>
</table>
</fieldset>
</div>
</div>
</center>
<div id="footer">
<input title="Main Page" type="button" onclick="MainPage()" style="background-image: url(Images/Home1.bmp)"></input>
<a href="#" onclick="history.go(-1)"> <input title="Previous Page" type="button" onclick="PreviousPage()" style="background-image: url(Images/BackNav1.bmp)"></input> </a>
<input title="Data Entry Page" type="button" onclick="DataEntr()" style="background-image: url(Images/Edit1.bmp)"></input>
<a href="HeatMap.html"><input title="Heat Map" type="button" onclick="HeatMap()" style="background-image: url(Images/Fahrenheit1.bmp)"></input> </a>
<a href="SafetyScreen.html"> <input title="Safety Screen" type="button" onclick="Safety()" style="background-image: url(Images/Safety.bmp)"></input> </a>
<input title="Standard Thresholds" type="button" onclick="StandardThresholds()" style="background-image: url(Images/StandardThreshold.png)"></input>
<input title="Trending" type="button" onclick="Trending()" style="background-image: url(Images/Trend.bmp)"></input>
<input title="Alarm and Events" type="button" onclick="Alarm()" style="background-image: url(Images/Alarm.bmp)"></input>
<input title="Report Expert" type="button" onclick="ReportExpert()" style="background-image: url(Images/ReportExpert.png)"></input>
<input title="Data Entry Reports" type="button" onclick="DataEntrSSRS()" style="background-image: url(Images/DataEntry.bmp)"></input>
</div>
<script>
var d = new Date();
document.getElementById("Date").innerHTML = d.toUTCString();
</script>
<script>
var d = new Date();
document.getElementById("Date2").innerHTML = d.toUTCString();
</script>
</body>
</html>
CSS代碼：
html {
min-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #70bg32;
background-repeat:no-repeat;
background: -webkit-linear-gradient( to left bottom, #0096DD, white);
background: -moz-linear-gradient( to left bottom, #0096DD, white);
background: -ms-linear-gradient( to left bottom, #0096DD, white);
background: -o-linear-gradient( to left bottom, #0096DD, white);
background: linear-gradient( to left bottom, #0096DD, white);
}
h1 {
position:relative;
color: white;
text-align: center;
bottom:30px;
font-size: 35pt;
}
h2 {
color: black;
text-align: center;
}
legend {
font-size: 1.4em;
font-weight: bold;
position: relative;
color: black;
border:2px;
}
male{
width: 10.5em;
height: 10.5em;
}
input[type=radio] {
-webkit-transform: scale(4, 4);
}
input[type=button] {
width:35px;
height: 35px;
background-color: transparent;
background-position:center;
background-repeat:no-repeat;
border:0px;
position: relative;
top: 7px;
}
input[type=button1] {
width:35px;
height: 35px;
background-color: transparent;
background-position:center;
background-repeat:no-repeat;
border:0px;position: relative;
top: 0px;
}
input[type=date] {
height:40px;
width:250px;
font-size:18pt;
}
input[type=number] {
height:40px;
width:60px;
font-size:18pt;
}
input[type=time] {
height:40px;
width:250px;
font-size:18pt;
}
table{
position:relative;
color: black;
text-align: center;
top:0;
border-spacing:0px;
border-collapse: separate;
width:100%;
height: 100%;
cursor: pointer;
}
textarea {
resize: none;
}
#formSelect{
height:40px;
width:250px;
font-size:16pt;
}
#header {
position:fixed;
width:100%;
height:60px;
background:#000000;
top:0;
left:0;
}
#formHeader {
position:relative;
height:35px;
background:#000000;
top:-18px;
left:0;
color: white;
text-align: center;
font-size:20pt;
font-weight: bold;
}
#formBody{
position:relative;
height:35px;
top:0px;
left:0;
color: black;
text-align: center;
font-size:20pt;
font-weight: bold;
}
#formTextArea{
position:relative;
height:35px;
top:0px;
left:0;
color: black;
text-align: center;
font-size:20pt;
font-weight: bold;
}
#content {
padding:10px;
padding-bottom:80px; /* Height of the footer element */
}
#footer {
width:100%;
height:50px;
position:fixed;
bottom:0;
left:0;
background:#000000;
}
#Date{
position:relative;
color: white;
text-align: left;
top: -80px;
left:5px;
}
#headerIcon{
position:relative;
color: white;
text-align: right;
top: -140px;
right:5px;
}
#forms{
display:inline-block;
max-width:100%;
}
p#formTitles {
color: white;
position:relative;
text-align: center;
font-size:10pt;
font-weight: bold;
}
#waterMark{
opacity: 0.1;
min-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: url("../Images/Logos/download42.jpg");
background-repeat:no-repeat;
}
.TriLogo1{
width:90px;
height:120px;
position: fixed;
top:120px;
left:150px;
}
.spaceUnder{
padding-bottom: 2em;
padding-top: 2em;
}
.spaceAbove{
padding-top: 0em;
}
.spaceUnderTitle{
padding-bottom: 1em;
}
#wrapper {
background:transparent url("../Images/Logos/download42.jpg") no-repeat center center;
min-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
top:120px;
opacity:0.9; /* I need this to not effect the form as well. i want this low like .2 */
background-repeat:no-repeat;
}
fieldset{
border:1;
min-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #70bg32;
background-repeat:no-repeat;
background: -webkit-linear-gradient( to left bottom, #2A59A1, white);
background: -moz-linear-gradient( to left bottom, #2A59A1, white);
background: -ms-linear-gradient( to left bottom, #2A59A1, white);
background: -o-linear-gradient( to left bottom, #2A59A1, white);
background: linear-gradient( to left bottom, #2A59A1, white);
display:inline;
width:60%;
padding:0px;
border-spacing:0px;
border-collapse: separate;
opacity:0.95;
position:relative;
}
1 個解決方案
解決方案1
1 已采納 2015-01-22 23:53:22
不透明度屬性不僅會影響自身，還會影響其所有子級。 因此，您必須更改html標記或使用偽元素：
div#wrapper:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url("...") no-repeat center;
background-size: cover;
opacity: 0.2;
}
希望這就是您要尋找的！
CSS / HTML 分層問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.