CSS的背景样式

最新推荐文章于 2022-10-02 19:08:00 发布

黯黯°

最新推荐文章于 2022-10-02 19:08:00 发布

阅读量272

点赞数 2

分类专栏：学习经验文章标签： css css3

本文链接：https://blog.csdn.net/weixin_44272970/article/details/103694862

版权

学习经验专栏收录该内容

12 篇文章 0 订阅

订阅专栏

前端学习经验（9）

CSS

背景

background：选择对象的背景样式。
如：定义背景颜色

	<head>
		<style>
			.a{
				height:200px;
				width:300px;
				background-color:green;					<!--定义背景颜色为绿色->
		</style>
	</head>
	<body>
		<div class = "a">背景样式</div>
	</body>

如：使用图片作为背景

	<head>
		<style>
			.a{
				height:200px;
				width:300px;
				backgroundr-image:url(http://wx3.sinaimg.cn/large/006fbYi5gy1fuklnwdi7jj30920920ts.jpg);	<!--定义图片作为背景->
		</style>
	</head>
	<body>
		<div class = "a">背景样式</div>
	</body>

如：背景图片的样式
repeat:背景图片的平铺方式
repeat:背景图片以平铺方式展开；
repeat-x：只在水平位置重复背景图片；
repeat- y：只在垂直位置重复背景图片；
on-repeat：背景图片不进行平铺

	<head>
		<style>
			.a{
				height:100px;
				width:100px;
				backgroundr-image:url(http://wx3.sinaimg.cn/large/006fbYi5gy1fuklnwdi7jj30920920ts.jpg);					<!--定义图片作为背景->
				backgound-repeat:repeat;	<!--repeat:背景图片的平铺方式  repeat:背景图片以平铺方式展开；repeat-x：只在水平位置重复背景图片；repeat- y：只在垂直位置重复背景图片；on-repeat：背景图片不进行平铺。-->
		</style>
	</head>
	<body>
		<div class = "a">背景样式</div>
	</body>

如：背景图片的位置及滚动
background-attachment:在浏览器中固定背景图片，不随滚动条滚动
background-position:设置图片的位置，位置分别为：left top right bottom;选择时选择两个位置进行距离的设置。

		<head>
			<style>
				.a{
					height:200px;
					width:300px;
					backgroundr-image:url(http://wx3.sinaimg.cn/large/006fbYi5gy1fuklnwdi7jj30920920ts.jpg);	<!--定义图片作为背景->			  
					background-attachment: fixed;	<!--background-attachment:在浏览器中固定背景图片，不随滚动条滚动-->
   					background-position:left 300px top 300px;<!--background-position:设置图片的位置，位置分别为：left top right bottom-->
			</style>
		</head>
		<body>
			<div class = "a">背景样式</div>
		</body>

文字阴影
text-shadow：给文字添加阴影效果。
text-shadow:h-shadow v-shadow blur color;
h-shadow:此属性必须存在，定义水平阴影的位置，可以选择负值。
v-shadow:此属性必须存在，定义垂直阴影的位置，可以选择负值。
blur:此属性为可选值，定义阴影模糊的距离。
color:此属性为可选值，定义阴影的颜色。

	<head>
		<style>
			h1{
				text-align:center;	<!--定义文字居中效果-->
				text-shadow:3px 3px 3px orange;
				}
		</style>
	</head>
	<body>
		<h1>给文字添加阴影效果</h1>
	</body>

黯黯°

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS的背景样式

前端学习经验（9）CSS背景background：选择对象的背景样式。如：定义背景颜色 <head> <style> .a{ height:200px; width:300px; background-color:green; <!--定义背景颜色为绿色-> </style> </hea...
复制链接

扫一扫