css图片背景样式

前言

CSS的图片背景样式还有哪些值得一看的地方呢,一起看看叭~

首先回顾一下图片作为背景样式的一些属性:

background-image为元素设置背景图像
background-repeat背景图像是否平铺
background-size属性规定背景图片的尺寸
background-origin规定背景图片的定位区域
background-position指定背景图像的位置
background-attachment背景图像是应该滚动还是固定
background-size背景颜色

话不多说直接上代码:

       

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div{
				 background-image:url('./dogge.png') ;
				 background-repeat:no-repeat;/*图片不重复*/
				 background-position:left bottom;/*指定图片位置*/
				 background-attachment: fixed;/*指定背景图像是滚动的*/
				 height: 1800px;
				 width: 900px;
				 border: 4px solid red;/*指定边框颜色*/
			 }
			 h1,p{
				 font-size: 60px;
				 color: #87CEEB;
			 }
		</style>
	</head>
	<body>
		<div id="div">
		<h1>Hello Word</h1>
		<p>是谁在偷偷学习呀?注意劳逸结合,保持最佳状态!</p>
		</div>
	</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值