当前位置：首页 > 前端开发 > 22 , CSS 构造颜色、背景与图像

22 , CSS 构造颜色、背景与图像

6个月前 (05-23)52

1. 设定颜色

2. 背景使用

3. 图像使用

1.设定颜色

红色的几种合法定义;

#f00;

#ff0000;

Red;

Rgb(255,0,0);

Rgb(100%,0%,0%);

2.十六进制三元组

第一个字节:红色的值;

第二个字节:绿色的值;

第三个字节:蓝色的值;

简化写法:#cccccc 可写成 #ccc, #ff6633 可以写成 #f63

3.使用 17 种具名颜色

黑色(black) 000000

藏蓝色(navy) 000080

绿色(green) 008000

海蓝色(teal) 008080

银色(silver) 0c0c0c

蓝色(blue) 0000ff

酸橙色(lime) 00ff00

浅绿色(aqua) 00ffff

绛紫色(maroon) 800000

紫色(purple) 800080

橄榄绿(olive) 808000

灰色(gray) 808080

红色(red) ff0000

紫红色(fuchsia) ff00ff

黄色(yellow) ffff00

橙色(orange) ffa500

白色(white) ffffff

4.使用 span 更好的控制文本中局部区域的文本

<span>文本内容</span>

5.使用 display 属性提供区块转换

inline,block,none

6.背景图象渐变的制作

Body {

Background: #ccc url(bg.gif) rpeat-x;

}

7.给一个区块加上一个背景

#branding {

Width: 700px;

Height: 200px;

Background: url(branding.gif) no-repeat;

}

8.给标题加上一个小图标

H1 {

Padding-left: 20px;

Background: url (bullet.gif) no-repeat left center;

}

如果希望使用百分比而不使用关键字,则 0 50%这样就实现了垂直居中

9.圆顶角

<div class=”box”>

<h2>Headline</h2>

<p>Content</p>

</div>

.box {

Width: 418px;

Background: #ccc url(bottom.gif) no-repeat left bottom;

}

.box h2 {

Background:url(top.gif) no-repeat left top;

}

如果不希望碰到边界,加上填充.

.box h2 {

Padding:10px 20px 0 20px;

}

.box p {

Padding:0 20px 10px 20px;

}

10.简单的 CSS 阴影效果

<div class="img-wrapper">

<img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />

</div>

.img-wrapper {

background: url(images/shadow.gif) no-repeat bottom right;

clear: right;

float: left;

position: relative;

margin: 10px 0 0 10px;

}

.img-wrapper img {

display: block; /*这个属性到列表再进行解释*/

margin: -5px5px 5px -5px;

position: relative;

}

5使用 display 属性提供区块转换 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用 display 属性提供区块转换</title>
<style type="text/css">
	div {
		width: 200px;
		height: 200px;
		background: red;
		display: inline;
	}
	
	span{
		width: 200px;
		height: 200px;
		background: red;
		display:block;
	}
	/*
	block转换成区块
	inline转换成内联
	none不占位的隐藏
	*/
	
</style>
</head>

<body>
<div>使用 display 属性提供区块转换:区块转内联</div><br/><br/>
<span>内联转区块,使用 span 更好的控制文本中局部区域的文本</span>
</body>
</html>

　　6背景图象渐变的制作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用 display 属性提供区块转换</title>
<style type="text/css">
	Body {
Background: #ccc url(images/1.png) rpeat-x;
}
	
	
	
</style>
</head>

<body>
<div>背景图象渐变的制作</div> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

　　7给一个区块加上一个背景

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>给一个区块加上一个背景</title>
<style type="text/css">
	
	div{
		width: 200px;
		height: 200px;
		background:red url(images/bg.jpg) no-repeat right bottom;
	}
	
	
</style>
</head>

<body>
<div>给一个区块加上一个背景</div>
</body>
</html>

　　8给标题加上一个小图标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>给一个区块加上一个背景</title>
<style type="text/css">
	
	H1 {
Padding-left: 20px;
Background:url(2.jpg) no-repeat left center;
}
	
	
</style>
</head>

<body>
<h1>给标题加上一个小图标</h1>
</body>
</html>

　　9圆顶角

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>给一个区块加上一个背景</title>
<style type="text/css">
	
	div{
		width:320px;
		height:180px;
		background:blue url(images/2.png) no-repeat left bottom;
}
	h1{
		background: url(images/3.png) no-repeat left top;
	}
	
</style>
</head>

<body>
<div>
<h1>圆顶角圆顶角圆顶角</h1>
<P>圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角圆顶角</P>
</div>
</body>
</html>

　　10简单的 CSS 阴影效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>给一个区块加上一个背景</title>
<style type="text/css">
	
	body{
		background: #fff;
	}
	div{
		width:320px;
		height:180px;
		background:blue;
}
		
</style>
</head>

<body>
<div>
<img src="images/pic7.jpg"/>还没有学好
</div>
</body>
</html>

　　

作者：柳志军
来源链接：https://www.cnblogs.com/liu-zhijun/p/10630177.html

标签: css

“22 , CSS 构造颜色、背景与图像” 的相关文章

CSS，font awesome和iconfont引入图标，并改变图标大小，颜色的方法

CSS，font awesome和iconfont引入图标，并改变图标大小，颜色的方法

1.font awesome  （1）在官网上下载图标库文件 （2） 代码 <!DOCTYPE html> &...

VSCode编写 Vue 项目标签内显示写CSS提示设置

VSCode编写 Vue 项目标签内显示写CSS提示设置

VSCode编写 Vue 项目标签内显示写CSS提示设置 修改配置文件： 在配置文件上加上这句话就可以了，没有使用插件。 "fi...

CSS标签学习笔记(一)

<base> 标签为页面上的所有链接规定默认地址或默认目标。 通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的...

用CSS改变选择文本的背景颜色(神飞)

1.用CSS改变选择文本的背景颜色　　::selection{background: #A8141B; color: white; /* Safari */} 　　::-moz...

CSS变形transform(2d)

CSS变形transform(2d)

[1]变形原点 [2]变形函数 [3]多值 前面的话  　　CSS变形transform是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还...

[css]我要用css画幅画(二)

[css]我要用css画幅画(二)

接着之前的[css]我要用css画幅画(一) ， 今天，我又画一个房子，很简单，屋顶、墙壁、门。   现在开始，做得效果都只兼容chrome，所以下面的c...

通过css改变svg的颜色（CSS3滤镜filter的属性drop-shadow）

通过css改变svg的颜色（CSS3滤镜filter的属性drop-shadow）

参考链接：http://willless.com/how-to-change-the-color-of-svg-introduced-by-img.html 1.svg标...

5行代码 超级简单 用css做好看的动画 实现背景颜色渐变过渡，宽高动态过渡

5行代码 超级简单 用css做好看的动画 实现背景颜色渐变过渡，宽高动态过渡

经常我们需要改变一个元素的样式时候，直接过渡会十分生硬，如果加上过渡效果，变换的过程柔和许多看着也就更好看了。 废话不多说，先上效果图：  ...

css颜色查看，web安全色网址

https://www.bootcss.com/p/websafecolors/ 作者：当下日月 来源链接：https://blog.csdn.net/xuant...

本站是一个非赢利性的网站,目的是为大家提供各类优秀的编程资源，所有的资源都是网友推荐或从互联网上收集整理到的，如果有侵犯您版权的请与我们联系，我们会尽快改正。

Powered By Z-BlogPHP. Theme by TOYEAN.