龙空技术网

持续分享CSS使用小技巧

埋头苦干的小码农 273

前言:

眼前你们对“maincss用途”大概比较珍视,看官们都需要学习一些“maincss用途”的相关文章。那么小编同时在网络上网罗了一些关于“maincss用途””的相关知识,希望朋友们能喜欢,咱们快快来学习一下吧!

背景图片固定大法(background-attachment)

background-attachment 定义和用法

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

可能的值

实现背景图片固定的实用代码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>背景固定大法</title>        <!--<link rel="stylesheet" href="css/main.css" />-->        <style>            body{                    background-image: url();                    background-repeat: no-repeat;  /*照片不重复*/                     background-attachment: fixed;                }        </style>    </head>    <body>            <p>传说中的背景固定大法</p>            <p>传说中的背景固定大法</p>            <p>传说中的背景固定大法</p>            <p>传说中的背景固定大法</p>            <p>传说中的背景固定大法</p>            <p>传说中的背景固定大法</p>            <p>传说中的背景固定大法</p>            <p>传说中的背景固定大法</p>            <p>传说中的背景固定大法</p>            <p>传说中的背景固定大法</p>    </body></html>
图像透明度大法(opacity)

定义和用法

opacity 属性设置元素的不透明级别。

语法

opacity: value|inherit;

实例一:创建透明图像

<!DOCTYPE html><html><head><style>img{opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}img:hover{opacity:1.0;filter:alpha(opacity=100); /* For IE8 and earlier */}</style></head><body><h1>图像透明度</h1><img src="; alt="Peach Blossom" /><p><b>注释:</b>在 IE 中,必须添加 <!DOCTYPE>,这样才能将 :hover 选择器用于除了 <a> 之外的其它元素。</p></body></html>

实例二:半透明框中加文本

呈现方式

<!DOCTYPE html><html><head><style>.background{  width: 400px;  height: 266px;  background: url() no-repeat ;  border: 1px solid black;}.transbox{  width: 338px;  height: 204px;  margin:30px;  background-color: #ffffff;  border: 1px solid black;  /* for IE */  filter:alpha(opacity=60);  /* CSS3 standard */  opacity:0.6;}.transbox p{  margin: 30px 40px;}</style></head><body><div class="background"><div class="transbox"><p>This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.This is some text that is placed in the transparent box.</p></div></div></body></html>
title标题前加小图标大法
<title>登录界面</title><link rel="icon" href="../20180320-Console/img/title-log.ico"># 注意:rel = icon# href 填写所选图标地址

PS:注意图片格式可为PNG\GIF\JPEG\ico,尺寸一般为16x16、24x24、36x36等(但亲测仅有ico格式可以显示)

制作ico格式图片步骤:

建议使用PS制作一张大小为16*16或者24*24或者36*36的图片(图片长度单位为【像素】,存储为【png,jpg】格式)将图片保存打开以下网址:将图片按其操作步骤制作,产出ico格式图片

呈现方式

#前端##html##开发#

标签: #maincss用途