CSS中实现背景图居中的方法步骤是什么
Admin 2022-05-26 群英技术资讯 1458 次浏览
css中,可利用“background-position”属性让背景图居中显示,该属性用于设置背景图的起始位置,当属性的值为“center”时,背景图会水平垂直居中显示,语法“元素{background-position:center}”。
本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。
css如何将背景图居中
在css中,通过background-position属性可设置背景图片的位置。下面举例讲解css中如何让背景图片居中显示。
示例如下:
1、新建一个html文件,命名为test.html,用于讲解css中如何让背景图片居中显示。使用div标签创建一个模块,用于测试。设置div标签的class属性为test,用于下面样式的设置。
在css标签内,通过class设置div的样式 ,定义其宽度为300px,高度为300px,边框为1px的灰色边框。
2、在css标签内,再通过background属性,设置div的背景图片为1.jpg,并使用background-position属性设置背景图片居中(center)显示。
在浏览器打开test.html文件,查看实现的效果。
总结:
1、使用div标签创建一个模块,设置div标签的class属性为test,用于下面样式的设置。
2、在css标签内,通过class设置div的样式 ,定义其宽度为300px,高度为300px,边框为1px的灰色边框。
3、在css标签内,再通过background属性,设置div的背景图片为1.jpg,并使用background-position属性设置背景图片居中(center)显示。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章给大家分享的是CSS3如何实现div右侧滑入效果。小编觉得挺实用的,对大家学习和理解CSS3滑动动画效果的实现有帮助,因此分享给大家做个参考,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧。
什么时候可以使用 !important ,规则1.覆盖内联样式2.覆盖优先级很高的选择器三、禁用 !important 的经验法则一、理解 !important
当我们在使用样式实现多行文字一般超出都会显示省略号的效果,那么你知道这个方法要怎么去实现吗?有不少朋友对此感兴趣,下面小编给大家整理和分享了相关知识和资料,易于大家学习和理解,有需要的朋友可以借鉴参考,下面我们一起来了解一下吧。
本文通过实例代码给大家介绍了css实现旋转翻牌动画效果,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
这篇文章主要介绍了css3媒体查询中device-width和width的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008