background-size: cover
属性使图像占据整个屏幕,但它保持纵横比,因此在较大的屏幕上只能看到一部分图像。 如何让它忽略纵横比,以便图像占据整个屏幕并且整个图像都可见?
HTML:
<html>
<head>
<link href="styles.css" rel=stylesheet>
<title>
Enjoy ;)
</title>
</head> <script type="text/javascript" src="getBG.js"></script></head>
<body>
<div class="intro">
<div class="textbg">
<div class="introText">
Welcome to PicShare
</div>
<div class="introDesc">
Today's theme is
</div>
</div>
</div>
<div class="back"> </div>
<div class="bg1" onclick="genBg()"><script>genBg()</script></div>
</body>
</html>
CSS:
html{
margin: 0px;
height: 100%;
}
body{
height: 100%;
margin: 0px;
background-color: #424242;
}
.intro{ //want this background to take up entire screen
height:100%;
background-color: #424242;
background-image: url("assets/themes/theme1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
答案 0 :(得分:2)
您使用background-size: 100% 100%
执行此操作,分别表示背景区域宽度和高度的100%。
答案 1 :(得分:1)
您可以选择将background-size属性设置为以下内容:
封面允许您缩放图像以覆盖整个身体,而包含只会缩放图像,以便整个图像仍然可见。
HTML
General
Complete name : Metadata Error.mov
Format : YSDO
Codec ID : YSDO (qt /YSDO)
File size : 1.10 TiB
Duration : 24 h 10 min
Overall bit rate mode : Variable
Overall bit rate : 111 Mb/s
Encoded date : UTC 2017-09-24 23:48:33
Tagged date : UTC 2017-09-26 09:23:29
Writing library : mtrx
Video
ID : 1
Format : ProRes
Format version : Version 0
Format profile : 422
Codec ID : apcn
Duration : 24 h 10 min
Bit rate mode : Variable
Bit rate : 101 Mb/s
Width : 1 920 pixels
Clean aperture width : 1 888 pixels
Height : 1 080 pixels
Clean aperture height : 1 062 pixels
Display aspect ratio : 16:9
Clean aperture display aspect ratio : 16:9
Frame rate mode : Constant
Frame rate : 29.970 (29970/1000) FPS
Color space : YUV
Chroma subsampling : 4:2:2
Scan type : Interlaced
Scan type, store method : Interleaved fields
Scan order : Top Field First
Bits/(Pixel*Frame) : 1.633
Stream size : 1.00 TiB (92%)
Writing library : apm0
Language : English
Encoded date : UTC 2017-09-24 23:48:33
Tagged date : UTC 2017-09-26 09:23:29
Color primaries : BT.709
Transfer characteristics : BT.709
Matrix coefficients : BT.709
matrix_coefficients_Original : BT.709
Audio #1
ID : 2
Format : PCM
Format settings : Little / Signed
Format settings, Endianness : Little
Format settings, Sign : Signed
Codec ID : in24
Duration : 24 h 10 min
Source duration : 24 h 10 min
Bit rate mode : Constant
Bit rate : 1 152 kb/s
Channel(s) : 1 channel
Sampling rate : 48.0 kHz
Bit depth : 24 bits
Stream size : 11.7 GiB (1%)
Source stream size : 11.7 GiB (1%)
Language : English
Encoded date : UTC 2017-09-24 23:48:33
Tagged date : UTC 2017-09-26 09:23:29
mdhd_Duration : 66187116
Audio #2
ID : 3
Format : PCM
Format settings : Little / Signed
Format settings, Endianness : Little
Format settings, Sign : Signed
Codec ID : in24
Duration : 24 h 10 min
Source duration : 24 h 10 min
Bit rate mode : Constant
Bit rate : 1 152 kb/s
Channel(s) : 1 channel
Sampling rate : 48.0 kHz
Bit depth : 24 bits
Stream size : 11.7 GiB (1%)
Source stream size : 11.7 GiB (1%)
Language : English
Encoded date : UTC 2017-09-24 23:48:33
Tagged date : UTC 2017-09-26 09:23:29
mdhd_Duration : 66187116
Audio #3
ID : 4
Format : PCM
Format settings : Little / Signed
Format settings, Endianness : Little
Format settings, Sign : Signed
Codec ID : in24
Duration : 24 h 10 min
Source duration : 24 h 10 min
Bit rate mode : Constant
Bit rate : 1 152 kb/s
Channel(s) : 1 channel
Sampling rate : 48.0 kHz
Bit depth : 24 bits
Stream size : 11.7 GiB (1%)
Source stream size : 11.7 GiB (1%)
Language : English
Encoded date : UTC 2017-09-24 23:48:33
Tagged date : UTC 2017-09-26 09:23:29
mdhd_Duration : 66187116
Audio #4
ID : 5
Format : PCM
Format settings : Little / Signed
Format settings, Endianness : Little
Format settings, Sign : Signed
Codec ID : in24
Duration : 24 h 10 min
Source duration : 24 h 10 min
Bit rate mode : Constant
Bit rate : 1 152 kb/s
Channel(s) : 1 channel
Sampling rate : 48.0 kHz
Bit depth : 24 bits
Stream size : 11.7 GiB (1%)
Source stream size : 11.7 GiB (1%)
Language : English
Encoded date : UTC 2017-09-24 23:48:33
Tagged date : UTC 2017-09-26 09:23:29
mdhd_Duration : 66187116
Audio #5
ID : 6
Format : PCM
Format settings : Little / Signed
Format settings, Endianness : Little
Format settings, Sign : Signed
Codec ID : in24
Duration : 24 h 10 min
Source duration : 24 h 10 min
Bit rate mode : Constant
Bit rate : 1 152 kb/s
Channel(s) : 1 channel
Sampling rate : 48.0 kHz
Bit depth : 24 bits
Stream size : 11.7 GiB (1%)
Source stream size : 11.7 GiB (1%)
Language : English
Encoded date : UTC 2017-09-24 23:48:33
Tagged date : UTC 2017-09-26 09:23:29
mdhd_Duration : 66187116
Audio #6
ID : 7
Format : PCM
Format settings : Little / Signed
Format settings, Endianness : Little
Format settings, Sign : Signed
Codec ID : in24
Duration : 24 h 10 min
Source duration : 24 h 10 min
Bit rate mode : Constant
Bit rate : 1 152 kb/s
Channel(s) : 1 channel
Sampling rate : 48.0 kHz
Bit depth : 24 bits
Stream size : 11.7 GiB (1%)
Source stream size : 11.7 GiB (1%)
Language : English
Encoded date : UTC 2017-09-24 23:48:33
Tagged date : UTC 2017-09-26 09:23:29
mdhd_Duration : 66187116
Audio #7
ID : 8
Format : PCM
Format settings : Little / Signed
Format settings, Endianness : Little
Format settings, Sign : Signed
Codec ID : in24
Duration : 24 h 10 min
Source duration : 24 h 10 min
Bit rate mode : Constant
Bit rate : 1 152 kb/s
Channel(s) : 1 channel
Sampling rate : 48.0 kHz
Bit depth : 24 bits
Stream size : 11.7 GiB (1%)
Source stream size : 11.7 GiB (1%)
Language : English
Encoded date : UTC 2017-09-24 23:48:33
Tagged date : UTC 2017-09-26 09:23:29
mdhd_Duration : 66187116
Audio #8
ID : 9
Format : PCM
Format settings : Little / Signed
Format settings, Endianness : Little
Format settings, Sign : Signed
Codec ID : in24
Duration : 24 h 10 min
Source duration : 24 h 10 min
Bit rate mode : Constant
Bit rate : 1 152 kb/s
Channel(s) : 1 channel
Sampling rate : 48.0 kHz
Bit depth : 24 bits
Stream size : 11.7 GiB (1%)
Source stream size : 11.7 GiB (1%)
Language : English
Encoded date : UTC 2017-09-24 23:48:33
Tagged date : UTC 2017-09-26 09:23:29
mdhd_Duration : 66187116
CSS
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>