CSS 背景图像背景图片定位

最新推荐文章于 2024-04-19 09:39:59 发布

weixin_30877181

最新推荐文章于 2024-04-19 09:39:59 发布

阅读量125

点赞数

原文链接：http://www.cnblogs.com/lszw/p/10768711.html

版权

本文详细介绍了CSS中background-position属性的使用方法，包括如何通过百分比和预设位置（如left top, center bottom等）来精确控制背景图片的位置，使网页设计更加灵活多样。

摘要由CSDN通过智能技术生成

background-position属性可以给背景图片定位。

background-position属性有两个值，第一个值是水平位置，第二个值是垂直位置。这两个值可以使用百分比来表示（50% 50% 表示垂直和水平都居中）。

也可以使用下面的方式表示：

下面的代码演示了背景图像定位。

<!DOCTYPE html>

< html >

< head >

< title >图片定位</ title >

< style type = "text/css" >

body {

background-image: url("https://www.liyongzhen.com//docs/images/spring-flower.png");

background-repeat: no-repeat;

background-position:center top;

color: #665544;

padding: 20px;}

h1 {

color: white;}

</ style >

</ head >

< body >

< h1 >软件开发，成就梦想</ h1 >

< h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 >

< p >我们能为中国‘996’程序员做些什么？怎样才能能引起西方媒体和政府的关注？</ p >

< p

>在程序员圈子里颇有名气的代码托管平台GitHub上，有人发起了一个名为“996.ICU”的项目，意为“工作996，生病ICU”，

“996”即许多企业的程序员工作状态，从上午9点干到晚上9点，每周工作6天。这一项目得到了大量程序员的响应，自从3月26日注册以来，

截至4月2日Star数已突破15万整数关口，表示至少有15万名程序员关注了这个项目。</ p >

</ body >

</ html >

图片来源 https://www.kisspng.com/

转载于:https://www.cnblogs.com/lszw/p/10768711.html

CSS 背景图像 背景图片定位