Как масштабировать фон значка? - PullRequest
Новая
       7

Как масштабировать фон значка?

0 голосов
/ 13 января 2019

Я сделал нить в: Как сделать всплывающую карточку с заголовком

Мне было просто интересно, как бы я масштабировал свое фоновое изображение, чтобы оно соответствовало изображению, которое я показывал в теме, так как оно сейчас выглядит так, и я попытался изменить проценты и найти связь, но только зашел в тупик.

Вот изображение, которое я использую: 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 Ответ

0 голосов
/ 16 января 2019

Это то, как вы масштабируете изображение, чтобы оно соответствовало рамке. Вы используете это свойство 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>
...