background-position—CSS设置背景图片的位置

background-position ：在 CSS 中通过 background-position 属性可以调整背景图片的位置。因为在默认情况下背景图片都是从设置了 background-position 属性的标记（例如 body 标记）在左上角开始出现的，但实际制作时设计者往往希望背景图片出现在指定的位置

background-position：在CSS中通过background-position属性可以调整背景图片的位置。因为在默认情况下背景图片都是从设置了background-position属性的标记（例如body标记）在左上角开始出现的，但实际制作时设计者往往希望背景图片出现在指定的位置。

background-position属性值：

属性值
效果

百分比
如：background-position:30% 70%

top
顶部

left
左边

right
右边

bottom
底部

center
居中

Bottom right
右下方

通过代码“background-position:30% 70%”的设置，使得背景图片的中心点在水平方向上处于30%的位置，在竖直方向上则位于70%的位置。

上面提到的“Bottom right”外，background-position的值还可以设置为top left、top center、top right、center left、center right、bottom left和bottom center等

本文转自【66CSS教程网】：(http://www.66css.com/)[原文地址]：file:///E:/Meterial/Everyday/Articles/background-position—CSS设置背景图片的位置_CSS_CSS教程_CSS+DIV教程_DIV+CSS视频教程-66CSS教程网.mht

background-position—CSS设置背景图片的位置相关推荐

Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
html如何把图片在背景图一半,img只显示图片一部分或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
CSS 设置背景图片
一.基本设置使用 CSS 可以通过以下属性设置背景图片: background-image: 设置背景图片的 URL. background-size: 设置背景图片的大小.可以设置为绝对像素值,也 ...
php设置背景图片的代码,css设置背景图片如何实现？（代码实例）
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
html背景图片只显示一张图片,img只显示图片一部分或 css设置背景图片只显示图片指定区域(示例代码)...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
css 设置背景图一半_img只显示图片一部分或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
css设置背景图片模糊，文字清晰展示
css设置背景图片模糊,文字清晰展示使用filter: blur来实现,blur的值越大越模糊效果图: html: <div class="box"><p&g ...
【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录一.实现效果二.基本 HTML 结构三.设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四.设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五.设置列表盒子样式 ( ...
css 设置背景图片模糊，内容不模糊
方案: 内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置. <!DOCTYPE html><html lang="en"> ...

background-position—CSS设置背景图片的位置

background-position—CSS设置背景图片的位置相关推荐

最新文章

热门文章