当发生某些事情时，我将 body 设置background-color为 gray 并减少opacity。然而，这显然也会改变按钮的不透明度。
我想要实现的是当动作发生时，改变除按钮之外的所有内容的不透明度。
var highlight = $('#' + scroll).closest('div').find('button');
$('body').css('opacity', '0.2');
$('body').css('background-color', 'grey');
$(highlight).css('background-color', '#FDFF47');
$(highlight).css('opacity', '1');
那怎么办呢？
我正在使用以下CSS代码:
.rounded_box{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:850px;
padding:15px;
background-color:#80C1FF;
margin:0 auto;
color: #0D2E47;
font-family: Arial,Helvetica,sans-serif;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
/* background-color:rgba(255,0,0,255); */
}
.rounded_box h1{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
而且我希望h1和其他元素为不透明的,在div里面有类rounded_box.但也使h1和其他元素透明,我不想要.
那么可以解决这个问题呢？
我试图在容器的背景上制作一个透明的盒子,但是,我无法在背景中间制作它,相反,当我尝试使用上边距来实现我的设计时,它会移动背景图片也下来了,所以我想问为什么我不能像W3C在http://www.w3schools.com/Css/tryit.asp?filename=trycss_transparency给出的例子那样做
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META http-equiv="Content-Type" Content="text/html; Charset=UTF-8">
<title>
Portal
</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body onload="load()">
<div id="header">
<img src="images/logo.gif" id="logo" alt="Logo"/>
<a href="http://www.google.com">
<img src="images/a.png" id="logo2" align="right" alt="logo"/>
</a>
</div>
<div id="container">
<div id="function"></div>
<div id="Display"></div>
<div id="View"></div>
</div>
<div id="footer">
</div>
</body>
</html>
这是CSS文件:
body{
font-size:100%;
margin: 0em 9em 0em 9em;
}
#header{
width:55em;
height:2.375em;
background:black;
border: 0em 0em 0em 0em;
}
#logo{
padding: …我有下面的CSS,它创建一个按钮,但我希望有透明效果(并略微看到后面的背景).请注意,我不希望它完全透明,完全不可见.只是一点点......
我曾尝试弄乱"不透明度",但这只会模糊图像并扭曲颜色.
.i2Style {
font:bold 20px"Arial Black", Gadget, sans-serif;
font-style:normal;
color:#ffd324;
background:#158edb;
border:0px solid #4a3a00;
text-shadow:0px -1px 1px #222222;
box-shadow:0px 0px 12px #2e2300;
-moz-box-shadow:0px 0px 12px #2e2300;
-webkit-box-shadow:0px 0px 12px #2e2300;
border-radius:15px 15px 15px 15px;
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-radius:15px 15px 15px 15px;
width:87px;
padding:20px 46px;
cursor:pointer;
margin:0 auto;
}
.i2Style:active {
cursor:pointer;
position:relative;
top:2px;
}
我有一个高度为300px的列表,我希望背景具有不透明度.但列表项必须保持不变(不透明度1).我怎样才能做到这一点？这是我的代码:
HTML:
<div class="dropdown">
<span class="notif">2</span>
<ul class="dropdown-menu">
<li><a href="#"><span>Elisadehasque</span> liked your story in <span>Disneyland Paris</span><span class="done">x</span></a></li>
<li><a href="#"><span>Petyana</span> started following you<span class="done">x</span></a></li>
</ul>
</div>
CSS:
.dropdown .dropdown-menu {
position: absolute;
top: 100%;
display: none;
margin: 0;
margin-left: -100px;
padding: 0;
height: 300px;
width: 250px;
background-color: #fff;
z-index: 10;
opacity: 0.8;
}
.dropdown-menu li {
z-index: 999999;
opacity: 1;
}
我正在尝试更改背景图像的不透明度以使其与网站匹配。问题是opacity: 0.5;改变元素内的一切。因此，不仅背景图像会发生变化，该部分中的文本和所有其他元素也会发生变化。我应该如何只更改图像的颜色？这是我的代码：
section {
background-image: url(../IMG/Photo_NR1.jpg);
padding: 15px;
width: 100%;
height: 700px;
}
我做了一些研究，但我找不到任何东西。我试图将所有元素从<section>标签中取出，但随后我被迫再次更改元素的位置。谢谢你的时间 ：）
我想在屏幕底部有一个半透明的固定栏，上面有一些按钮，但我希望按钮显示为完全不透明。
我的问题是，如果我设置栏的不透明度，显然会设置按钮的不透明度（因为它们是页脚栏的子项）。
如何使栏为半透明，但按钮以完全不透明的方式显示，而不更改大量 HTML 标记？
https://jsfiddle.net/leecollingsco/2bmgg3Lr/
<div id="footerBar" class="hidden-xs">
<div class="container">
<div class="text-center">
<a href="/contact-us" class="btn btn-primary"><span class="fa fa-phone"></span> Call 01234 567890</a>
<a href="/contact-us" class="btn btn-primary"><span class="fa fa-mouse-pointer"></span> Book a consultation</a>
<a href="/events" class="btn btn-primary"><span class="fa fa-calendar-o"></span> Come to an open evening</a>
</div>
</div>
</div>
#footerBar {
position:fixed;
bottom:5px;
left:0;
width:100%;
padding:.75em 0;
color:#fff;
opacity:.5;
background-color: #eee;
box-shadow:0 0 1.5em rgba(0,0,0,0.5);
z-index:999;
}
所以我有一个带有背景图像的不透明度的div.我希望悬停div时弹出的文本保持100%.有人可以帮我这个吗？任何帮助将不胜感激!
<body>
<div id="container">
<div id="container_inner">
<div id="container_txt">
<p><a href="#">WORLD OF WARCRAFT</a></p>
<p id="p_txt">This is a simple World of Warcraft styled div that has been done implementing html, css, and css3</p>
</div>
</div>
</div>
</body>
旋转流行的问题.在这种情况下,我有一个div,当我鼠标悬停时我想变暗,而不会使其内部的文本变暗.我在那里; 如果我将div鼠标悬停在包含文本的div之外的任何地方,我可以实现这一点.
这是我的尝试:http://jsfiddle.net/59M7N/.请注意,如果鼠标位于框的顶部区域,则不会发生悬停效果.
HTML
<div id="text">Hello World</div>
<div id="box">
<div id="opaque"></div>
</div>
CSS
#box {
height:200px;
width:200px;
border:5px solid black;
}
#opaque {
position:absolute;
width:200px;
height:200px;
background-color:black;
opacity:0;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
#opaque:hover {
opacity:0.6;
}
#text {
position:relative;
color:blue;
top:25px;
left:10px;
z-index:5;
}
我试图设置a的透明度<div>只影响背景颜色,但每次我这样做,它最终会使整个<div>透明.这是我的CSS,也是一个小提示:
html {
background-image: url("https://dl.dropboxusercontent.com/u/47991825/8856597-daisies-green-background.jpg");
}
.profilePic {
width: 128px;
height: 128px;
border-radius: 64px;
-webkit-border-radius: 64px;
-moz-border-radius: 64px;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
#mainCont {
width: 250px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
padding: 15px;
border: 1px solid #000000;
height: 40%;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
font-size: 12pt;
background-color: #000000;
opacity: 0.4;
}
#footer {
position: absolute;
bottom: 0;
height: 40px;
margin-top: 40px;
} …我有以下CSS
.dropdown-menu {
background-color: black;
opacity: 0.6;
color: white;
}
.dropdown-menu > li {
background-color: black;
opacity: 1;
color: white;
}
当HTML元素(使用这个上面CSS)加载我越来越不透明度设置为从预期的.dropdown-menu,问题是,这不透明度里面继承dropdown-menu > li元素的事件,当我使用!important的透明度声明.
那么如何克服这个问题(不透明度应该在父元素上保持0.6)并且在这个孩子上我想要不透明度1？
我有以下LESS变量:@yellow:#fbba00;
我想将这种颜色应用于trwith 的背景opacity: 0.2.
我试过以下,但问题是不透明度应用于整个tr,而不仅仅是背景.
我看见几个题目涉及背景混浊(1,2),但他们总是用rgba()设置颜色.它与我要找的不匹配(LESS变量).
在LESS/CSS文件中:
@yellow: #fbba00;
.bg-light-yellow {
background-color: @yellow;
opacity: 0.2;
}
在HTML页面中:
<tr class="bg-light-yellow">
...
</tr>