求大佬解釋一下,為什么超出部分不能影藏
<!DOCTYPE html>
<html>
<head>?
<meta charset="utf-8">
<title>背景原點</title>
<style type="text/css">
? ? .box1 {
? ? ? ? width:220px;
? ? ? ? height:120px;
? ? ? ? border:10px dashed #000;
? ? ? ? padding:20px;
? ? ? ? font-weight:bold;
? ? ? ? background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
? ? ? ? background-origin:content-box;
? ? ? ? position:relative;
? ? }
? ? .box1 span{
? ? ? ? position:absolute;
? ? ? ? left:0;
? ? ? ? top:0;
? ? }
? ? .box2{
? ? ? ? border:5px solid #333;
? ? ? ? height:44px;
? ? ? ? text-overflow:ellipsis;
? ? ? ? overflow:hidden;
? ? ? ? white-space:nowrap;
? ? }
</style>??
</head>?
<body>
<div class="box1"><span>padding</span>
? ? <div class="box2">content</div>
</div>
</body>
</html>
2021-04-20
因為你是在box1里插入的背景圖片,但是把overflow屬性寫到box2里。但如果把overflow寫到box1里,圖片高度沒有溢出bo1的高度所以也不會隱藏??梢灾苯影褕D片插入box2里,如果覺得這樣圖片不好看,可以試試把圖片作為一個單獨的元素用定位方式調整位置