我发了一个帖子在: How To Make Pop-up Title Card
我只是想知道如何缩放我的背景图像以适合我在线程中显示的图片，因为它当前看起来是这样的，我试图更改百分比并找到关系，但只会陷入死胡同。
这是我正在使用的图像: W
这是我的代码:
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Carter+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div class="title-card logo-a caption-a"></div>
</body>
</html>
.title-card {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
margin: 5px;
border: 1px solid #fff;
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.38);
border-radius: 6px;
color: black;
padding: 10px;
overflow: hidden;
background-position: 50% 50%;
font-family: Arial, sans-serif;
}
.title-card::before {
position: absolute;
display: inline-block;
left: 0;
width: 100%;
height: 50%;
padding: 10px;
background: -moz-linear-gradient(top, rgba(0,0,0,0.53) 0%,
rgba(0,0,0,0.24) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.53) 0%,rgba(0,0,0,0.24) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87000000', endColorstr='#3d000000',GradientType=0 );
color: #fff;
overflow-x: hidden;
overflow-y: auto;
opacity: 0;
transform: translateY(200%);
transition: all 500ms ease;
}
.title-card:hover::before {
opacity: 1;
transform: translateY(100%);
}
.title-card.caption-a::before {
content: "Hamlet To Be or Not To Be Rhetorical Analysis";
}
.title-card.logo-a {
background-image: url("W.jpg");
}
最佳答案
这是缩放图像以适合框的方式。您使用此 CSS 属性:
background-size: cover;
.title-card {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
margin: 5px;
border: 1px solid #828282;
color: black;
padding: 10px;
overflow: hidden;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
font-family: Arial, sans-serif;
}
.title-card::before {
position: absolute;
display: inline-block;
left: 0;
width: 100%;
height: 50%;
padding: 10px;
background: #999999;
color: #fff;
overflow-x: hidden;
overflow-y: auto;
opacity: 0;
border-top: 1px solid #828282;
transform: translateY(200%);
transition: all 500ms ease;
}
.title-card:hover::before {
opacity: 1;
transform: translateY(100%);
}
.title-card.caption-a::before {
content: "Hamlet To Be or Not To Be Rhetorical Analysis";
}
.title-card.logo-a {
background-image: url(/image/J4Z3r.jpg);
}<div class="title-card logo-a caption-a"></div>关于javascript - 如何缩放图标背景？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54165677/