Question

我只是想知道如何缩放背景图像以适合在线程中显示的图片，因为它当前看起来像这样，并且我试图更改百分比并找到关系，但只能死胡同。

这是我正在使用的图像： 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");
  }

Answer 1

这是缩放图像以适合框的方式。您使用以下CSS属性：

background-size：封面；

.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>

如何缩放图标背景？

1 个答案: