div背景透明内容不透明与0.5PX边框兼容设置

Posted wanglehui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div背景透明内容不透明与0.5PX边框兼容设置相关的知识,希望对你有一定的参考价值。

1、问题:设置 border-width:0.5px;  并兼容安卓和苹果移动端。

   兼容:苹果ios的 safari 支持浮点数边框,安卓浏览器不支持,会四舍五入到1px。不同浏览器效果额不同

   解决方案:设置2层嵌套的div,最外层的用来定位,保障我们设置的内容不会脱离原先的文档流。

         里层设置两个div,一个用来书写内容,一个用来专门设置边框

HTML代码 :

<!-- position_box用来定位,控制该区域在原文档流中的位置 -->
<div class="position_box">
     <!--填充内容,不用position_box是因为如果要设置圆角+背景色,就有些麻烦,border也不能用,被缩放了--> 
    <div class="content">边框为0.5px</div>
    <!-- 专属用来设置0.5px的边框,圆角,以及背景色 -->
    <div class="border"></div>
</div>
View Code

CSS代码:

/* 定位 */
.position_box{
    width: 200px;
    height: 200px;
    position: relative;
}
/* 给内容定位,提升层级 */
.content{
    position: relative;
    z-index: 2;
    padding: 10px;
}
/* 边框设置,圆角,背景色 */
.border{
    /* 边框颜色,背景色,圆角  */
    background-color: aquamarine;
    border: 1px solid red;
    border-radius:10px;
    /* 缩放比例 */
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    /* 强制拉伸 */
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
}
View Code

 

2、问题:如何设置一个div的背景色透明度,但使其内容不透明

   原理:这个解决方案其实就跟上面的解决方案一样了,将背景色和内容分离在两个不同的div(容器)中,再用外层一个div(容器)包裹起来,然后分别做各自的设置,就可以了

   代码: 同上面的代码,直接修改上面设置 border 的css属性即可,或者直接加 opacity: 0.75;

 

如果您还有其他的更加巧妙的方法,欢迎您留言,先行表示感谢

参考链接:http://www.zhangyunling.com/543.html

 

以上是关于div背景透明内容不透明与0.5PX边框兼容设置的主要内容,如果未能解决你的问题,请参考以下文章

Html表格背景颜色透明度怎么调,只用HTML和css

rgba兼容性处理(背景透明文字不透)

背景透明,内容不透明

设置div背景透明的方法?

如何使DIV背景透明内容不透明

如何将div设置为透明