如何缩放图标背景？
Posted
技术标签:
【中文标题】如何缩放图标背景？【英文标题】：How to Scale Icon Background? 【发布时间】：2019-01-13 02:40:46 【问题描述】：我在以下位置发了一个帖子： 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");
【问题讨论】：
【参考方案1】：这是您缩放图像以适合框的方式。你使用这个 CSS 属性：
背景尺寸：封面；
.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(https://i.stack.imgur.com/J4Z3r.jpg);
<div class="title-card logo-a caption-a"></div>【讨论】：
以上是关于如何缩放图标背景？的主要内容，如果未能解决你的问题，请参考以下文章