css构造颜色、背景与图像

最新推荐文章于 2022-06-24 16:50:59 发布
最新推荐文章于 2022-06-24 16:50:59 发布
阅读量224 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuanjin1988/article/details/42741689
版权 
<!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">
<html>
	<head>
		<title>css构造颜色、背景与图像</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				background:#fff;
			}
			div span
			{
				color:#f60;
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 颜色进制的简化写法: -->
		<!--#000000  #000   黑色的简化代码-->
		<!--#ff0000  #f00   红色的简化代码-->
		<!--#333333  #333   
		<!--#ff6699  #f69                 -->
		<!--#f0f0f0  简化不了             -->
		
		<!-- 使用span控制文本 -->
		
		<div>
			PHP100.COM中文网，<span>很靠谱</span>的PHP社区
		</div>
		
		
	</body>
</html>


 

<!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">
<html>
	<head>
		<title>css构造颜色、背景与图像</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				background:#fff;
			}
			div
			{
				width:200px;
				height:200px;
				background:red;
				/* 内联转区块*/
				display:none;
			}
		</style>
		
	</head>
	
	<body>
		<!-- 使用display属性提供区块转换 -->
		<!-- inline     转换成内联       -->
		<!-- block      转换成区块       -->
		<!-- none       不占位的隐藏     -->
		
		<div>PHP100.COM中文网</div>
		PHP200.COM

	</body>
</html>


 

<!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">
<html>
	<head>
		<title>css构造颜色、背景与图像</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				/*background-color:#ff0000;
				background-image:url(bg.gif);
				background-repeat:repeat-x;*/
				
				/*简化写法*/
				background:#f00 url(bg.gif) repeat-x;
			}
		</style>
		
	</head>
	
	<body>
		<!-- 背景图片渐变的制作 -->
		
		
		<div>PHP100.COM中文网</div>
		PHP200.COM
		<br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><br/><br/><br/>
		<br/><br/><br/><br/><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>


 

<!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">
<html>
	<head>
		<title>css构造颜色、背景与图像</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			body
			{
				
			}
			div
			{
				width:500px;
				height:500px;
				background:red url(4.jpg) no-repeat right bottom;
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 给一个区块加一个背景 -->
		
		
		<div>PHP100.COM中文网</div>
		
		
	</body>
</html>


 

<!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">
<html>
	<head>
		<title>css构造颜色、背景与图像</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			h2
			{
				/*left center 可以替换成0 50%来实现垂直居中*/
				background:url(tb.gif) no-repeat left center;
				padding-left:20px;
				font-size:80px;
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 给标题加上一个小图标 -->
		
		
		<h2>PHP100.COM中文网</h2>
		
		
	</body>
</html>


 

<!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">
<html>
	<head>
		<title>css构造颜色、背景与图像</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			div
			{
				width:320px;
				height:180px;
				background:red url(bottom.png) no-repeat left bottom;
				
			}
			h1
			{
				width:auto;
				background:red url(top.png) no-repeat left top;
				padding-left:20px;
			}
			p
			{
				/*如果width宽度固定 padding-left 会多出一块*/
				/*如果width宽度auto padding-left 不会多一块*/
				width:auto;
				padding-left:20px;
				/*首行缩进20px*/
				text-indent:20px;
				
			}
			
			
			
		</style>
		
	</head>
	
	<body>
		<!-- 圆顶角 -->
		<div>
			<h1>PHP100.COM中文网</h1>
			<p>PHP100.COM是以PHP为主的资源共享网站。PHP100.COM是以PHP为主的资源共享网站。PHP100.COM是以PHP为主的资源共享网站。PHP100.COM是以PHP为主的资源共享网站。PHP100.COM是以PHP为主的资源共享网站。</p>
		</div>
		
	</body>
</html>


 

<!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">
<html>
	<head>
		<title>css构造颜色、背景与图像</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<style type = "text/css">
			div
			{
				float:left;
				margin:2px 0 0 2px;
				background:url(shadow.png) no-repeat right bottom;
				
			}
			
			div img
			{
				position:relative;
				top:-2px;
				left:-2px;
			}
			
		</style>
		
	</head>
	
	<body>
		<!-- 简单CSS阴影效果 -->
		<div>
			<img src = "3.jpg" /> 
		</div>
		
	</body>
</html>


 

 

「已注销」
关注
专栏目录
CSS3彩色圆点排列背景特效
06-24
"CSS3彩色圆点排列背景特效"就是利用CSS3的强大能力，通过background属性来构造一个由彩色圆点组成的矩阵式背景，以此提升网页的视觉吸引力和交互体验。 首先，我们需要理解CSS3中的background属性。这是一个复合...
css背景- 简写属性
qq_42318977的博客
01-04 429
https://www.runoob.com/css/css-background.html 背景颜色的简写属性为 “background”: background:#ffffff url('https://static.runoob.com/images/mix/img_tree.png') no-repeat right top; 当使用简写属性时，属性值的顺序为：: background-color background-image background-repeat background-at.
说说background属性
曹建涛的博客
11-17 2167
前言backgound，相信接触前端的人都已经很熟悉了，但是小白们都只是停留在background:#fff的层面上，那么今天作为小白的我要揭竿而起了~(๑•̀ㅂ•́)و✧简述用作“描述背景”的css属性，background是一系列背景属性的简写，包含了下面几种具体属性： 注：以下摘自w3school 值 描述 CSS background-color 规定要使用的背景颜色
CSS杂记-background属性
call_me_fly的博客
01-03 558
CSS杂记-background属性刚在项目中遇到个问题就是我的一个日期选择的input框设置了背景色和背景图片，结果只有背景色没有背景图片，话不多说先上代码 .filter .item input[type=text] { width: 150px; height: 30px; background: #fff; border: 1px solid #C7
CSS整理2
小鱼喝水的博客
05-12 160
背景颜色取值:   rgb,  rgba,  十六进制背景图片background-image: url();存放本地地址或者网络地址， 默认平铺如果网页上出现了图片, 浏览器会再次发送请求获取图片解析结果背景平铺如果是简单背景，可以通过平铺来降低图片的大小, 提升网页的访问速度repeat 默认no-repeat  不平铺repeat-x  水平平铺repeat-y  垂直平铺注意点:   背景...
css background属性的使用方法
致年在学习
11-24 812
最近一直写图片的时候背景属性的很多都不熟悉，现在重新巩固知识点。 css 背景属性background的使用方法 背景色 background-color: 它的两个值：         transparent（默认值，透明）         color(指定的颜色，和文本颜色的设置方法相同) .bj{ background-color:#fff; 或者 b
css构造多啦A梦
06-05
本示例“css构造多啦A梦”就是这样一个实例，它利用CSS的特性来创建出著名的卡通角色——哆啦A梦。这个项目不仅展示了CSS的基本语法，还涉及到了CSS的高级技巧，如定位、盒模型、伪类、渐变、阴影以及自定义字体等。...
css实现气泡框效果(实例加图解)
10-26
为了得到空心的三角形箭头，我们可以再添加一个与气泡框背景颜色相同的三角形，并将其稍微偏移，覆盖原来的实心部分。首先修改HTML结构，添加一个新的`em`元素： ```html <span></span> 我是龙恩 ...
纯CSS实现的菱形导航菜单效果代码
12-13
例如，`ul li a .al`和`.ar`的`left`和`right`属性设置为负值，使得背景图像的角落部分超出元素边界，从而形成菱形的角。同时，通过调整`top`属性，可以控制角的垂直位置。 在代码中，`ul li a:hover`、`:active`和...
svg代码与css代码互相转换，并压缩
06-29
本文将详细探讨如何实现SVG代码与CSS代码的相互转换，并介绍一种名为"svg2css"的工具来帮助完成这一过程。 SVG是一种基于XML的矢量图像格式，它可以无限缩放而不失真，非常适合用于图标、徽标和其他图形元素。CSS3...
背景图片的定位问题详解
weixin_30455661的博客
03-02 644
我们在研究其他的网站的样式的时候经常会发现一种情况，就是在很多background属性里都调用同一张图片，来满足网页各个部分的使用。打开这种图片看一下，会发现这张图片上包含了很多小图片，比如：又如：这些小图片就是整图分割后的各个部分，把各个部分放在一张图片上，而不是是分别存储成单独的图片，其目的我们都知道，就是减少http请求次数，节省时间和带宽。那么怎么来实现一张图片在不同的地方...
【CSS】css的background属性用法详解，background常用缩写形式
余浩的博客
06-24 3875
//指定背景颜色 //设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景;//设置背景图像的位置//设置背景图像的大小 //指定背景图像的铺排方式//设置背景图像显示的原点[background-position相对定位的原点];//设置背景图像向外剪裁的区域;//指定背景图像是滚动还是固定; 默认滚动；...
background属性介绍
qq_43654065的博客
09-07 3305
background属性在CSS中有较多的应用，主要用来设置背景颜色、图片。background属性可以分开写，也可以合并，建议合并减少代码量。 1. background-color：设置背景颜色； 设置的背景颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（不包括外边距）。如果边框有透明部分（如虚线边框），会透过这些透明部分显示出背景色。颜色可以直接是颜色名称（red）、十六进制（#fff）、rgb（rbg（178,211,152）），inherit会继承父级的背景颜色。 2. backg
DIV CSS优化
u010421562的博客
05-14 147
一.Css background背景语法 CSS背景基础知识CSS 背景这里指通过CSS对对象设置背景属性，如通过CSS设置背景各种样式。 背景语法： background: background-color || background-image || background-repeat || background-attachment ||background-position...
关于background和background-color的区别
qq_41675057的博客
06-20 4892
例：css{background:#fff;background-color:#fff;}background-color 只设定了背景颜色而background附带了no repeat属性并且background还能设置图片，背景，定位等。
css background的多种属性详解
web_xiaolei的博客
10-13 1万+
css的background属性由以下属性组成：background-color：背景色 background-image：背景图片 background-size：背景图片尺寸 background-repeat：背景图片重复(repeat,repeat-x,repeat-y,no-repeat) background-position：背景图片位置 background-attachment：背
简单说 background-color 与 backgroundColor的区别
热门推荐
FEWY的博客
09-10 2万+
说明我们先来看看出了什么问题。 var a = document.querySelector('body'); var
CSS样式与HTML元素详解
- `background`设置背景图像，如`URL`。 - `图形文件名">`插入图片。 - `<table>`定义表格，`<caption>`定义表格标题，`<tr>`定义行，`<th>`定义表头，`<td>`定义表格数据，`align`属性用于设置单元格内容的对齐方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值