日度归档:2020年1月30日

CSS 代码如何使“图像对象”透明或不透明呢?


摘要:
下文讲述在css中,设置图片对象透明和不透明的方法分享,如下所示;


实现思路:
使用css中opacity属性对图片对象进行设置,使其透明度发生变化

例:
设置一张图片半透明状态和正常状态

 
  <html>
<head>
<title>猫猫教程(www.maomao365.com)</title> 
<style> 
img
{
 opacity:0.5;
filter:Alpha(opacity=50); /* IE8或更早的浏览器适用 */
}
</style>
</head>
<body>

<img  src='http://www.maomao365.com/wp-content/uploads/2020/01/css_opacity%E5%B1%9E%E6%80%A7%E7%AE%80%E4%BB%8B%E8%AF%B4%E6%98%8E_11921.gif'      />

</body>
</html>
css 图片设置半透明举例应用

css 图片设置半透明举例应用

CSS3 opacity属性简介说明


摘要:
下文讲述css代码中 opacity属性的功能简介说明,如下所示:


css opacity功能说明

css opacity属性功能:
设置一个html元素的透明度级别。
—css opacity 语法说明—-
opacity: value|inherit;
—————————
css opacity属性值说明:

属性值

备注说明
value

设定不透明度,
缺省值为0.0,( 0.0(完全透明)到1.0(完全不透明))
inherit

从父级继承透明度信息


css opacity举例说明

 <html>
<head>
<title>猫猫教程(www.maomao365.com)</title> 
<style> 
div
{
background-color:blue;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8或更早的浏览器适用 */
color:white;
}
</style>
</head>
<body>

<div>将div中的内容设置为透明度0.5(包括背景和文字都会变为不透明)!</div>

</body>
</html>
css  opacity属性简介

css opacity属性简介

如何同时对相同的标签编写css代码呢?


摘要:
在css中的代码编写中,我们常常会遇见对一类不同的标签设置相同的样式风格,那么此种代码该如何编写呢,下文将一一道来。

例:
下列标签都具有相同的样式风格

   h1{ color:red;}
   h2{ color:red;}
   p{ color:red;} 
  
   /*以上css脚本,我们可以采用以下css脚本进行编写
     使用逗号对不同的标签进行分隔,使可以同时对其进行css样式编写
   */
   h1,h2,p{
      color:red;
   }
  

例:

    <html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
h1,h2,p
{
	color:red;
	font-weight:bold;
}
</style>
</head>

<body>
<h1>this is h1 标签</h1>
<h2>this is h2 标签</h2>
<p>this is p 段落</p>
</body>
</html>
 
css 分组选择器举例说明

css 分组选择器举例说明