相关疑难解决方法(0)

我希望div有一个透明的背景.
我尝试使用background-color和这样做opacity,但问题是边框和文本内部也变得透明.这里的例子.

这可以在不使用透明PNG背景图像的情况下实现吗？

我有这个注册表格框,我真的很喜欢背景如何获得不透明度,透明度为25%(85),但后来我注意到文本和表单元素也变得暗淡等等,所以我想知道如何做到这一点只有边框和背景而不是盒子里面的东西？

#regForm {
z-index:11;
position: absolute;
top: 120px;
left: 500px;
background: #000;
color: #FFF;
width: 500px;
height: 240px;
border: 6px solid #18110c;
text-align: center;
margin: 40px;
padding: 1px;
  opacity: 0.85;
  -moz-opacity: 0.85; /* older Gecko-based browsers */
  filter:alpha(opacity=85); /* For IE6&7 */

}

我想为父级应用不透明度,但我不希望子元素继承此不透明度.

<div class="parent">
 <div class="child"></div>
</div>

.parent {
  opacity: 0.6;
}

有没有办法"取消"继承的不透明度？也许强迫它opacity=1为儿童元素？

我试图在LESS中使用Javascript在phpstorm中编译..

我正在尝试基于在此站点上找到的不透明度的跨浏览器实现创建一个函数:link

具体来说,我正在尝试创建一个LESS函数来重新创建这段代码:

.crossbrowseropacity {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

这就是我在实现它时所拥有的:

.crossbrowser(@color,@alpha){
  @myred:red(@color);
  @mygreen:green(@color);
  @myblue:blue(@color);
  @ievalue:Math.floor(@alpha * 255).toString(16);
  background-color: @color;
  background-color: rgba(@myred,@mygreen,@myblue,@alpha);

/* For IE 5.5 - 7*/

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#@ievalue+@myred+@mygreen+@myblue, endColorstr=#@ievalue+@myred+@mygreen+@myblue);

  /* For IE 8*/

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#@ievalue+@myred+@mygreen+@myblue, endColorstr=#@ievalue+@myred+@mygreen+@myblue)";
}

它不会编译正确.有人可以帮我这个吗？

如何在元素中使用css制作半透明背景？但内容也不透明？抱歉英语不好.谢谢.

感谢下面的所有帮助,解决方案.

我是网络开发的新手,我正在尝试重建一个网站来练习我的CSS.

问题网站是http://www.divecarib.com.如果向下滚动到该主页上的图片,您会注意到它们在悬停时"淡化".我如何实现这种淡化？使用不透明度可以使背景图像通过,而不是在该网站上实现的方式.

感谢您的帮助!

下面是我的淡入淡出尝试...不包括原始帖子中的代码,因为我认为这是无关紧要的,因为我走错了路.

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   }

   .fade:hover {
      opacity: 0.7;
      }

---解决方案(至少我是怎么做的 - 取自 http://jsbin.com/igahay/1/edit?html,output)-----

    <div class=picSet>
            <figure class="tint">
                <p id="#p1">Student in training</p>
                <p id="#p2" style="position: absolute;top: 36px; color: white;">SKAT crew doing open water training</p>
                <img id=pic1  src="Media/pic1.jpg" />
            </figure>
    </div>

.tint {
    position: relative;
    float: left;
    margin: 3px;
    cursor: pointer;
}

.tint:before {
    content: "";
    display: block;
    position: absolute;
    top: 0; …

嘿,我想知道你们中是否有人遇到过类似的问题？我正在网页的广告部分工作,它有一个非常酷的背景,我想继续进入元素的部分,所以我有一个框,一个框的rss提供到网站上的更新,然后我有一个广告框.这是我的HTML:

<div class="side">
  <div id="ad">
    bla
  </div>
  <div id="rss_news">
    double bla
  </div>
</div>

和css:

.side {
  float: left;
  background-color: black;
  width: 300px;
  min-height: 710px;
  padding: 0 0 0 0px;
  margin-top: 25px;
  border: 1px solid white;
  border-radius: 8px 8px 8px 8px;
  opacity: 0.3;

 }

 #ad {
   border: 1px solid blue;
   height: 320px;
   max-height: 350px;
   margin: 15px;
   opacity: 1;

 }

 #rss_news {
   border: 1px solid yellow;
   height: 320px;
   max-height: 350px;
   margin: 15px; 
   opacity: 1;

 }

正如你所看到的那样,正如我所期待的那样,侧面阶级将他的属性嵌入他的内部.有没有办法,我能以某种方式告诉其他id标签忽略不透明度？

提前致谢

我正在尝试新的文本笔划功能,我在网上搜索了一个跨浏览器的解决方案.现在我只能用webkit属性找到它.

-webkit-text-stroke: 2px #FF1E00;

如果有办法可以让所有浏览器以相同的方式显示,你能告诉我吗？

我正在玩这个渐变生成器,并注意到在filter属性中,他们使用常见位置十六进制颜色代码的变体:

#00ffffff

似乎实现了rgba效应: 永久链接

我也看到提到这个方法在这里.这在IE中有用吗？哪个版本的IE支持这个？

我确实看到了这个问题,但如果IE支持它,答案从未真正提到过.他们只是说这是无效的.

如果IE支持这一点,那么使用半透明PNG真的没有意义.对？

我基本上试图创建这个:

添加了具有背景图像的父容器,然后添加了需要透明的子容器.

这是我的HTML:

<div class="scent-brand-contact">
    <div class="scent-brand-container">               
       <section id="black-studio-tinymce-8" class="widget-1 widget-first widget-odd widget widget_black_studio_tinymce">
            <div class="textwidget">
                <p>All our fragrances are developed in compliance with the International Fragrance Association ensuring strict adherence to safety purity and manufacturing standards.</p>
                <p>LEARN MORE ABOUT HOW SCENT BRANDING CAN BENEFIT YOUR BUSINESS</p>
            </div>
        </section>
        <section id="text-4" class="widget-2 widget-last widget-even widget widget_text">
            <div class="textwidget">
            <button type="button">contact us today</button>
            </div>
        </section>                    
   </div>
</div>

而CSS:

.scent-brand-contact{
    position:relative;
    background-image: url(images/lemon.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    min-height:380px;
} …