HTML CSS 背景图居中属性background-position

HTML CSS背景图居中（无序列表）

    --背景重复：backgroung-repeat:--no-pepeat：不重复--repeat-x：水平水平方向平铺; --repeat-y：垂直方向平铺--背景位置：background-position(x,y):--属性值分水平和垂直方向:-- 水平方向: left/center/ight;-- 垂直方向: top/center/bottom :--background-position:right;表示图片右居中，两个属性当只设置一个时，另外一个默认为center--背景大小设置: background-size--按高度等比缩放: contain--按宽度等比缩放: cover完全按照容器大小进行100%缩放: background-size:100% 100%;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渐变背景</title><style>ul {width: 260px;list-styLe: none;padding: 0 40px 0 0;/* border: 1px solid red; */}li {width: 300px;height: 40px;border: 1px solid red;background: url("imgurl");background-repeat: no-repeat;background-position: right;}/* --背景重复：backgroung-repeat:--no-pepeat：不重复--repeat-x：水平水平方向平铺; --repeat-y：垂直方向平铺--背景位置：background-position(x,y):--属性值分水平和垂直方向:-- 水平方向: left/center/ight;-- 垂直方向: top/center/bottom :--background-position:right;表示图片右居中，两个属性当只设置一个时，另外一个默认为center--背景大小设置: background-size--按高度等比缩放: contain--按宽度等比缩放: cover完全按照容器大小进行100%缩放: background-size:100% 100%;*/</style>
</head><body><div><ul><li>第三年初</li><li>夺萃比无无无无</li><li>而纷纷发文</li></ul></div>
</body>
</html>

背景图居中属性background-position

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>渐变背景</title><style>.box {width: 400px;height: 400px;border: 1px solid gold;background-color: mediumpurple;background-image: url("imgurl");/* 图片大小 */background-size: 100% 100%;/* 不重复 */background-repeat: no-repeat;/* 居中 水平、垂直居中 */background-position: center center;}</style>
</head><body><div class="box"></div>
</body></html>

HTML CSS 背景图居中属性background-position相关推荐

html css背景图居中显示,网站背景图居中自适应以及拉伸填充CSS代码解决方法
写这篇水文呢,也是最近在自己在魔改一个主题用作新做的班级网站. 发现模版的背景图片以及其他地方的图片显示只能在电脑端看到,而在移动端不能够自适应.顺便也整理出来. 首先是图片的居中自适应: 需要先给C ...
css背景图不失真_CSS背景background图片
1.后盾图片语法 bac千克round-image:url() 引入后援图片 background-repeat:no-repeat 设置后盾图片可否重复平铺 background-position: ...
css背景图background - 多背景定义
css背景图background - 多背景定义 1. 方法一 .bg{height:600px;background: url(../../static/images/slider/zplc.png ...
i css svg,如何设置 CSS 背景图中的 SVG 的颜色
Coloring SVGs in CSS Background Images 如何设置 CSS 背景图中的 SVG 的颜色 I love using SVG in CSS background ima ...
css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: 1 2 3 4 5 6 7 8 9 10 <style> html,body{margin:0px;padding:0px;} #backgrou ...
php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
Css3之基础-5 Css 背景、渐变属性
一.CSS 背景概述背景属性的作用 - 背景样式可以控制 HTML 元素的背景颜色.背景图像等 - 背景色 - 设置单一的颜色作为背景 - 背景图像 - 以图片作为背景 - 可以设置图像的位置.平铺 ...
背景图的属性（backgroud）
backgroud:red url(../img/tupian.png) 1.backgroud-origin(背景图的起始点) 属性值: padding-box默认值 ...
html图片撑开盒子,css背景图撑开盒子高度
本文原地址需求: 给定1980px*1080px背景图,在网页显示时,图片宽度等于浏览器宽度,高度根据原图比例显示对应高度,假设图片最小宽度设置为1024px,则最小高度为1024/(1980*10 ...

HTML CSS 背景图居中属性background-position

HTML CSS背景图居中（无序列表）

HTML CSS 背景图居中属性background-position相关推荐

最新文章

热门文章