如何让div图片透明度不互相影响

2024-10-02

父div的透明度不影响子div透明度

在设置div的透明度的时候如果设置了父div的透明度(opacity=0.8),那么子div的透明度也随着改变了,并且设置子div的透明度不起作用. 这种情况下可以使用rgba来设置父div的透明度:例如设置div黑色半透明,可以设置div的background:rgba(0,0,0,0.5).

函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素．解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 */ background: rgba(0, 0, 0, 0.6); } 2> 使用 opacity, 设置一个背景DIV,此DIV使用绝对布局 Example <div class="demo"> <div class="demo-bg"&g

【html/css】若母div设置了透明度，如何才能使得里面的子div不继承母div的透明度

用rgba的方式给母div设置透明度的话就不会影响子div的透明度了. 例: background: rgba(51, 51, 51, 0.5);

解决IE6下png图片透明度不显示的问题

世界上最遥远的距离,不外乎我在搞前端,你却在用旧IE,现在随着XP要退休了,IE6的市场占有率应该也会逐步下滑.不过基于天朝人民的惰性以及企鹅微软的“扎篱笆”活动,做网站的朋友依旧不能忽视IE6的存在. 现在谈的是解决IE6下png图片透明度不显示的问题,这招是淘宝的伎俩,貌似12年双十一活动页面代码中用的就是这套路: 首先加一段这样的代码: <!--[if IE 6]> <script src="js/DD_belatedPNG.js"></script

CSS鼠标点击式变化图片透明度

今天分享前端代码主题:jequery控制css图片透明度很多时候在网站图片处理上需要实现一些辅助效果,比如鼠标在图片上滑动时或点击时改变图片颜色(变灰或者其他),其实一个简单的办法就是改变图片css透明度属性. 如何改变呢?一种是纯css,一种使用jquery或者javascript代码控制.第一种使用:hover伪类选择器,本示例使用第二种. 先看最后效果: 第一步:放置图片 <ul id="test"> <li> <

CSS3 实现六边形Div图片展示效果

原文:CSS3 实现六边形Div图片展示效果效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>visibility: hidden; 也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置我们要用到3层div进行旋转来得到这个效果(ps:3层div的大小是一样的). 最外层div(boxF)旋转120度.第二层(b

TCPDF 背景图片透明度

1.TCPDF 背景图片透明度参考:https://bbs.csdn.net/topics/392364981 效果: 2.画一条线: 2.1方法解说 /*画一条线: x1:线条起点x坐标 y1:线条起点y坐标 x2:线条终点x坐标 y2:线条终点y坐标 style:SetLineStyle的效果一样 */ // $pdf->Line($x1, $y1, $x2, $y2, $style=array()); 2.2方法使用: /*线的颜色*/ $this->SetLineS

html之改变图片透明度而不改变文字的透明度--两种方法实现

图片与图片上的文字设置不同的透明度的两种方法: 第一种方法:背景图+定位+background: url(timg.jpg)no-repeat; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .d1 { background: url(tim

Android 设置图片透明度

我了解的比较快捷的ImageView设置图片的透明度的方法有: setAlpha(); setImageAlpha(); getDrawable().setAlpha(). 其中setAlpha()已经不提倡使用了.通过看源码,我们发现setImageAlpha()的方法,实际就是setAlpha(),两者完全一样. 关于第三中方式,是先获取drawable对象,在设置该对象的透明度.需要说明的是,如果还有其他ImageView对象使用了相同的图片资源,那么第三中方式会影响所有使用该资源的Ima

IE8下jQuery改变png图片透明度时出现的黑边问题

png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起切入并保存为JPG格式. 以上两种方法我试了试,好像效果并不好png8格式仍就会有黑边. 解决方法: 1.不要直接改变图片的透明度,而是给图片套个容器,去修改这个容器的透明度 2.给这个容器加个颜色相近的背景颜色(非常重要,解决bug的关键就在这一步,) 一般情况下,到此bug就解决了,如果还是有问题,请看下面: 3.给容器加

iOS开发-UISlider改变图片透明度

拖动条是通过滑块的位置来标识数值,而且拖动条允许用户拖动滑块来改变值.因此,拖动条通常用于对系统的某种数值进行调节,如调节亮度,透明度,音量等. 一.属性介绍 @property(nonatomic) float value; //设置当前slider的值,默认是0. @property(nonatomic,getter=isContinuous) BOOL continuous; //滑动时是否连续触发事件,默认为YES: @property(nullable, nonatomic,stron

div图片垂直居中如何使div中图片垂直居中

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』点评:关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧,烦人的是没有具体或者相当详细的解决方法,希望本文所整理的知识点可以帮助到你 div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的淘宝UED 招聘中有这样

div图片垂直居中

div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的淘宝UED 招聘中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是随意,而是有其现实的原因,垂直居中是淘宝工作中最常遇到的一个问题,很有代表性.题目的难点在于两点: 1.垂直居中: 2.图片是个置换元素,有些特殊的特性. 至于如何解决,下面是一个权衡的相对结构干净,CS

HTML5：footer定位（底部+居中）的探讨+div图片居中问题

初学HTML+CSS布局,尝试自己写一个百度首页,可是footer的定位遇到麻烦而且百度没有好的解决方法,在此记录下逐步的过程.记录之,备忘. 初学,解决方法难免出现不妥之处,也请看到这篇文章的前辈指点一二,在此先谢过. 首先是设置为 footer{ clear: both; display: block; position: absolute; bottom: 100px; } 时效果为:确实绝对定位到了底部.可是因为是绝对定位.使用 footer{ clear: bo

opacity设定图片透明度

实例 1 - 创建透明图像定义透明效果的 CSS3 属性是 opacity. 首先,我们将展示如何通过 CSS 来创建透明图像. 常规图像: 带有透明度的相同图像: 请看下面的 CSS: img { opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ } IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度.opacity 属性能够设置的值从 0.0 到 1.0.值越

改变父元素的透明度，不影响子元素的透明度—css

1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>透明度写法</title> <style type="text/css"> *{ margin:0; padding:0; } .wrap{ margin:20

JS实现简单的图片透明度循环变化（渐变）

找了好多,都是由100到0就结束了,到头来自己魔改,以下就是源码. div中加入img,js添加函数,完事(调用),取名后面加个1是为了避免冲突 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>简单透明度渐变</title> </head> <body> <div id="img_eat"

div css 布局对seo 影响布局原则

一.代码精简使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道.代码精简所带来的直接好处有两点:一是提高蜘蛛爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到蜘蛛喜欢,这样对收录数量有一定好处. 二.表格的嵌套问题很多网站如何推广的文章中称,搜索引擎一般不抓取三层以上的表格嵌套,这一点一直没有得到搜索引擎官方的证实.我的几项实验结果没有完全出来,但根据目前掌握的情况来看,蜘蛛爬行Table布局的页面,遇到多层表格嵌套时,

Android课程---用进度条改变图片透明度

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" a