#div1{ width: 200px; height:350px; background-color: red; float:left; margin-top:5px; margin-left: 5px; margin-right: 5px; background-image: url(huoying.png ) ; background-size:200px 200px; background-repeat:no-repeat; 我设置文字方向后div自己改变了大小
1 回答
李晓健
TA贡献1036条经验 获得超461个赞
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="yes" name="apple-touch-fullscreen"> <meta content="telephone=no" name="format-detection"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"> <meta http-equiv="Cache-Control" content="max-age=300"/> <title>test</title> </head> <body> <div> 这里是文字 </div> </body> </html>
div{
margin: 0 auto; /* 这里是为了让div居中 你可以不需要 */
outline: 1px solid red; /* 这里是为了看到div的边界 你可以不需要 */
width: 200px;
height: 350px;
background-image: url("0.jpg");
background-repeat: no-repeat;
background-size: 100px 350px; /* 这里宽是要div的一半 就是100px 高你可以根据需要自行设定 */
background-position: left center; /* 这里是为了让背景图靠左 center值你可以改成其他的看你自己有需求 */
box-sizing: border-box;
padding-left: 100px; /* 这里是让div左边有它自己一半宽度的边距，正好是图片背景图的显示区域 */
text-align: center; /* 这里是让文字居中 */
}- 1 回答
- 0 关注
- 1083 浏览
添加回答
举报
0/150
提交
取消