日度归档:2020年6月22日

css代码中我们常见的deg单位指啥呢?


摘要:
下文讲述使用css代码中deg单位的相关分享说明,如下所示:

deg详解:
    deg:是Degress的缩写,
    一个圆等于360度,在css里面等于360deg
deg注意事项:
    此单位从IE9开始被支持,在其它的浏览器中都支持此单位

例:
将网页旋转180deg,反转网页

<meta charset='utf-8' />
<body>
<p>
maomao365.com <br />
让网页反转的实现方法分享
</p>
<hr />
<div >
 我倒过来了
</div> 
<style>
 div{
    background-color:green;
    color:white;font-weight:bold;
    width:160px;
    height:80px;
    line-height:80px; 
    padding-left:10px;
 }

   body{
transform:rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
</style>
 </body>
css deg示例分享页面反转180度

css deg示例分享页面反转180度

css如何让网页倾斜呢?


摘要:
下文讲述使用css代码将网页倾斜的方法分享,如下所示:

实现思路:
    1.确保网页中所有元素存在于body元素中
    2.使用 transform属性对网页旋转指定角度

例:
旋转网页1deg

  <meta charset='utf-8' />
 <body>
<p>
maomao365.com <br />
让网页倾斜的实现方法分享
</p>
<hr />
<div >
 我倾斜了,你看出来没?
</div> 
<style>
 div{
    background-color:green;
    color:white;font-weight:bold;
    width:160px;
    height:80px;
    line-height:80px; 
    padding-left:10px;
 }

   body{
transform:rotate(1deg);
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
}
</style>
 </body>
css让网页倾斜的示例分享

css让网页倾斜的示例分享

css如何设置背景图片的透明度呢?


摘要:
下文讲述使用css代码将div的背景图片设置透明度的方法分享,如下所示:

实现思路:
    使用filter滤镜即可设置背景透明度,如下:设置透明度为百分之70
    filter:
     alpha(opacity=70); /*支持 IE 阅读器*/
     -moz-opacity:0.70; /*赞成 FireFox 涉猎器*/
     opacity:0.70; /*支持 Chrome, Opera, Safari 等阅读器*/

例:
设置div的背景透明度为百分之50

 <meta charset='utf-8' />
<style>
 div{
   background-image:url(http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png);
   width:300px;
   height:150px;
   margin-top:10px;
}


/*设置 div2中背景图片
 的透明度为百分之50
*/
#div2{
  filter:
     alpha(opacity=50); 
     -moz-opacity:0.50; 
     opacity:0.50;  
}
</style>
<p>
maomao365.com <br />
设置背景图片透明度
</p>
<hr />

<div id="div1"></div> 

<div id="div2"></div> 
css设置背景图片透明度的示例分享

css设置背景图片透明度的示例分享