我在网格上有9个项目,我希望所有项目在每个项目上都有0.5个不透明度,并且只有在盘旋时,div/item和内部的所有内容都有1.0 opacicty.
这是JS
$('.gallery-single').css({ opacity: 0.5 });
$('.gallery-single a').mouseover(function(){
$('.gallery-single-title', this).css('display', 'block');
$('.gallery-single', this).css({ opacity: 1 });
});
$('.gallery-single a').mouseout(function(){
$('.gallery-single-title', this).css('display', 'none');
$('.gallery-single', this).css({ opacity: 0.5 });
});
HTML
<div class="gallery-single">
<a href="#" title="">
<div class="gallery-single-title hide">Some text goes here</div>
<div class="gallery-single-img"><img src="http://img.youtube.com/vi/code/0.jpg" width="300" height="200" /></div>
</a>
</div>
加载时所有项目的不透明度均为0.5,但聚焦时不会更改不透明度.我在这做错了什么？
我想知道是否可能影响父div的bg颜色或不透明度.
我有一个透明白色的div:
background-color:rgba(255,255,255,0.9);
div包含带圆角的文本字段,文本字段背景颜色在某种程度上可以是负透明度数字,因此div和textfield的总不透明度等于0.5？
它就像已经透明的div的圆形rec中的mmore透明度.
我提出了3种可能的解决方案:
你觉得我应该怎么做？
- 编辑---
我使用了解决方案#2的变体,我创建了一个png文件.这是(未经处理的)结果(点击联系我们打开模态div).很难看,因为模糊,但窗户也是透明的.
请注意,这远不是最佳解决方案,因为我更新下面的内容时必须更新png.
我正在尝试实现等效的css属性:"overflow:transparent 50%".例如,如果我有这个:
<div style="border: 1px solid black; width: 200px; height: 200px; overflow: visible;">
<img src="img.png">
</div>
我希望200x200盒子中显示的图像部分正常.溢出200x200盒子的图像部分我希望部分透明.也许有办法通过在主要div周围定义四个div来做到这一点？我不确定一个简单的方法来做到这一点.
+------------------+
| img overflow, |
| 50% transparent |
| +------------+ |
| | normal img | |
| +------------+ |
| |
+------------------+
图像宽度和高度是手头已知的.div将附加一些javascript以允许通过拖动重新定位图像,因此div将像视口一样运行,并且图像可能在任何一侧溢出.理想情况下,需要在所有浏览器中工作.
我正在开发一个项目,我在其中使用图像作为菜单的背景.我已经在CSS样式表中定义了类,这些类指示项目是否被"选中"时的外观,这意味着用户不在每个项目链接到的页面上.
我将它与图像顶部的div结构化,并将样式应用于它,使其具有半透明的白色背景,因此看起来像图像的一部分被突出显示.每个半透明div还包含组成链接的文本,颜色设置为白色.我希望div保持不透明度,而文本保持不透明度为"1".
我已经尝试过在类似问题中讨论的方法(CSS - 将不透明度应用于元素而不是元素中的文本)但该方法似乎对我不起作用.
我已经张贴的对的jsfiddle链接代码位在http://jsfiddle.net/Cwca22/uG5y8/如果你想看看它.
在此先感谢所有的帮助.
我试图让不透明度在IE中工作,我现在在IE8中测试,Chrome等工作正常,但IE8很糟糕.
我的代码是:
$('#mydiv').animate({'opacity': '0.5'});
和
$('#mydiv').css('opacity', 0.5);
不透明度适用于此div中保存的图像,但没有任何文字,这是非常令人愤怒的:(任何人都可以帮助我吗？在此先感谢.
当给定元素时,元素的opacity所有静态和相对子元素都以部分透明度呈现.但是,具有position: absolute(或position: fixed)的元素不会继承此元素,而是以完全不透明度呈现,除非另有说明.
现在,我可以style.opacity通过调用执行赋值的函数来替换赋值,然后循环遍历所有子节点,获取它们的计算样式,并查看它们的位置属性是否保证添加自己的style.opacity...但这有点像核武器.
我也知道我可以添加opacity: inherit适当的元素,但这只有在它们是褪色元素的直接子元素时才有效 - 如果它们是后代呢？
我想知道是否有办法强制元素继承正确的透明度.
旁注:当我使用时filter:alpha(...),IE会以我想要的方式执行,有趣的是.
我正在尝试使用GD更改图像的不透明度,我发现的几乎所有解决方案都类似于下面的代码,您可以在其中创建白色透明背景并将其与图像合并.
但这并不能使图像透明,图像变得更亮,你实际上无法透视它.
所以我的问题是,如何更改图像的不透明度以便您可以查看它？或者我这个代码做错了什么？
//Create an image with a white transparent background color
$newImage = ImageCreateTruecolor(300, 300);
$bg = ImageColorAllocateAlpha($newImage, 255, 255, 255, 127);
ImageFill($newImage, 0, 0, $bg);
//Get the image
$source = imagecreatefrompng('my_image.png');
$opacity = 50;
//Merge the image with the background
ImageCopyMerge($newImage,
$source,
0, 0, 0, 0,
300,
300,
$opacity);
header('Content-Type: image/png');
imagepng($newImage);
imagedestroy($newImage);
谢谢!
我正在尝试使其成为一个链接，当WebKit完全转换它们时，它始终是一种与未访问的链接相匹配的特定颜色和某种不透明度。
使用这个：
a:visited {
color:#cc7839;
opacity:0.1;
}
我可以使访问的链接始终是该颜色，除非不透明度没有做任何事情。我将其设置为0.1以使其更容易查看。
当我将鼠标悬停在访问的链接上时，它将转换为WebKit为a：link：hover设置的不透明颜色。
这是另一个文件中的CSS，用于设置所有链接：
a:link:hover,a:hover,a:visited:hover {
color: #cc7839;
opacity:0.8;
text-decoration:none;
-webkit-transition:all 0.5s ease-in;
-moz-transition:all 0.5s ease-in;
}
我想我必须在后者的CSS中更改某些方面，以a指定哪些元素？
我正在尝试做一些非常简单的事情,一个para的不透明度设置为0,当在父div上盘旋时,para的不透明度变为1,在不透明度改变后发生了文本的变化,它不是完全闪烁,文本有点自我调整自己有点奇怪.
这是小提琴:http: //jsfiddle.net/krish7878/7t6GM/
HTML代码:
<div class="para">
<p> SOME SAMPLE TEXT </p>
</div>
CSS代码:
.para{
width: 1000px;
border: 1px solid #000;
}
.para p{
font-family: Arial, sans-serif;
font-size: 80px;
opacity: 0;
}
.para:hover p{
opacity: 1;
transition: all 400ms ease;
-moz-transition: all 400ms ease;
-webkit-transition: all 400ms ease;
-o-transition: all 400ms ease;
-ms-transition: all 400ms ease;
}
嗨,我想设置我的背景图像透明,其余内部不!我可以这样做吗？我使用Bootstrap ......
这是我的HTML的分裂
<!-- Startseite Section -->
<section id="startseite" class="start-section">
<div class="container">
<h1><span style="opacity: 1.0;">Interne Links</span></h1>
<div class="row">
<div class="col-lg-12">
<section id="Startseite" class="pfblock">
<div class="row">
....//Here are Elements how text and divs
</div>
</section>
</div>
</div>
</div>
</section>
这是CSS Split:
.start-section {
height: 100%;
padding-top: 150px;
text-align: center;
/*background: #fff;*/
background-image:url('../img/bg.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0.7;
}
有关信息:不透明度0.7工作,但后来我透明:(