課程
/前端開發
/HTML/CSS
/十天精通CSS3
background-size中的這幾個屬性可以同時使用嗎？如填了長度值，有填了cover，？
2018-07-27
源自：十天精通CSS3 5-3
正在回答
background-size:auto|長度值|百分比|cover|contain
“”|“”是或者的意思
但是可以轉變動畫效果，可以將background-size屬性從cover變成contain屬性之類的
<!DOCTYPE html>
<html>
<head>?
<meta charset="utf-8">
<title>變形與動畫</title>
<style>
.wrapper {
? width: 400px;
? height: 200px;
? margin: 20px auto;
? border: 2px dotted red;
? position:relative;
}
.wrapper div {
? padding: 15px 20px;
? color: #fff;
??
? background: url(http://static.mukewang.com/static/img/logo_index.png) repeat;
? background-size:cover;
? position: absolute;
? top: 50%;
? left:50%;
? -webkit-transform: translate(-50%,-50%);
? transform: translate(-50%,-50%);
? -webkit-transition: all 0.5s? ease-in? 0.2s;
? transition: all 0.5s ease-in 0.2s;
.wrapper div:hover {
? background-color: red;
? border-radius: 10px;
? background-size:contain;
</style>
</head>?
<body>
<div class="wrapper">
? <div>鼠標放到我的身上來</div>
</div>
</body>
</html>
慕少8052535 提問者
我覺得應該是col-xs-6安裝到你系統用戶配置的NPMpath路徑下就可以了！
what f**king you talking about ?
舉報
本課程為CSS3入門教程，深刻詳解CSS3知識讓網頁穿上絢麗裝備
2 回答linear-gradient只能用在background-image屬性里嗎
2 回答background-size:
4 回答background屬性和background-color屬性有什么區別??？?
2 回答background屬性順序
2 回答background-clip會改變background的所有屬性吧？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-07-29
background-size:auto|長度值|百分比|cover|contain
“”|“”是或者的意思
但是可以轉變動畫效果，可以將background-size屬性從cover變成contain屬性之類的
<!DOCTYPE html>
<html>
<head>?
<meta charset="utf-8">
<title>變形與動畫</title>
<style>
.wrapper {
? width: 400px;
? height: 200px;
? margin: 20px auto;
? border: 2px dotted red;
? position:relative;
}
.wrapper div {
? padding: 15px 20px;
? color: #fff;
??
? background: url(http://static.mukewang.com/static/img/logo_index.png) repeat;
? background-size:cover;
? position: absolute;
? top: 50%;
? left:50%;
? -webkit-transform: translate(-50%,-50%);
? transform: translate(-50%,-50%);
? -webkit-transition: all 0.5s? ease-in? 0.2s;
? transition: all 0.5s ease-in 0.2s;
}
.wrapper div:hover {
? background-color: red;
? border-radius: 10px;
? background-size:contain;
}
</style>
</head>?
<body>
<div class="wrapper">
? <div>鼠標放到我的身上來</div>
</div>
</body>
</html>
2022-03-24
我覺得應該是col-xs-6安裝到你系統用戶配置的NPMpath路徑下就可以了！
2019-05-02
what f**king you talking about ?