0
点赞
收藏
分享

微信扫一扫

【CSS】CSS 背景设置 ⑤ ( 盒子中图片对齐操作 )


文章目录

  • ​​一、盒子中图片对齐操作​​
  • ​​1、设置 div 盒子​​
  • ​​2、设置背景图片​​
  • ​​3、设置图片平铺​​
  • ​​4、设置图片平铺​​
  • ​​二、完整代码示例​​
  • ​​1、代码示例​​
  • ​​2、显示效果​​






一、盒子中图片对齐操作


实现博客中的如下效果 : 图片在 div 盒子中靠左 垂直居中的样式 ;

【CSS】CSS 背景设置 ⑤ ( 盒子中图片对齐操作 )_代码示例



1、设置 div 盒子



首先 , 设置 div 盒子 , 设置宽高 , 以及背景颜色 , 用于显示 div 范围 ;

<style>
.item {
width: 800px;
height: 150px;
background-color: pink;
}
</style>

【CSS】CSS 背景设置 ⑤ ( 盒子中图片对齐操作 )_背景图片_02



2、设置背景图片



通过设置 ​​background-image: url();​​ 设置 div 背景图片 ;

图片路径可以不使用双引号 ;

<style>
.item {
width: 800px;
height: 150px;
background-color: pink;
background-image: url(images/div_bg.jpg);
}
</style>

【CSS】CSS 背景设置 ⑤ ( 盒子中图片对齐操作 )_html_03



3、设置图片平铺



设置 ​​background-repeat: no-repeat;​​ 样式 , 令 图片 不重复 ;

<style>
.item {
width: 800px;
height: 150px;
background-color: pink;
background-image: url(images/div_bg.jpg);
background-repeat: no-repeat;
}
</style>

【CSS】CSS 背景设置 ⑤ ( 盒子中图片对齐操作 )_背景图片_04



4、设置图片平铺



设置图片背景位置 , ​​background-position: 30px center;​​ , 将图片放置在左侧 30 px 位置 , 垂直方向居中对齐 ;

<style>
.item {
width: 800px;
height: 150px;
background-color: pink;
background-image: url(images/div_bg.jpg);
background-repeat: no-repeat;
background-position: 30px center;
}
</style>

【CSS】CSS 背景设置 ⑤ ( 盒子中图片对齐操作 )_css_05






二、完整代码示例



1、代码示例



<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子内图片对齐</title>
<base target="_blank"/>
<style>
.item {
width: 800px;
height: 150px;
background-color: pink;
background-image: url(images/div_bg.jpg);
background-repeat: no-repeat;
background-position: 30px center;
}
</style>
</head>
<body>
<div class="item"></div>
</body>
</html>



2、显示效果



【CSS】CSS 背景设置 ⑤ ( 盒子中图片对齐操作 )_html_06


举报

相关推荐

0 条评论