css 覆盖边界的图像[已关闭]

b0zn9rqh 于 2023-03-05 发布在其他

关注(0)|答案(2)|浏览(115)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
2天前关闭。
Improve this question
我需要在CSS中得到这个结果：
enter image description here

css

来源：https://stackoverflow.com/questions/75599381/image-overlaying-the-border

2条答案

按热度按时间

2vuwiymt1#

body {
  background-color: #0E86D4;
}

.card {
  width: 270px;
  height: 330px;
  background-color: #EBEBEB;
  border: 4px solid #000000;
  border-radius: 10px;
  text-align: center;
}

#divbox {
  display: block;
  width: 278px;
  background: url("Images/xbox.png");
  background-repeat: no-repeat;
  background-size: 295px 165px;
  margin: -4px;
  padding-top: 50px;
  border-radius: 10px;
}

h2 {
  margin: 141px 80px 11px 80px;
}

.card_button {
  background-color: #00008B;
  border-color: #00008B;
  color: white;
  font-weight: 700;
  height: 40px;
  width: 130px;
  border-radius: 10px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="card">
    <div id="divbox">
      <h2>X Box SX</h2>
      <button class="card_button">Ver Ofertas</button>
    </div>
  </div>
</body>

</html>

赞(0）回复(0）举报 2023-03-05

58wvjzkj2#

尝试使用image标签代替background-image属性，如下所示：

.card{
  width: 270px;
  height: 330px;
  background-color: #EBEBEB;
  border: 4px solid #0e0ee0;
  border-radius: 15px;
  text-align: center;
}
.card img{
  width: 278px;
  height: 165px;
  margin: -4px;
  border-radius: 15px;
}
.card_button{
  background-color: mediumblue;
  color: white;
  padding: 10px 30px;
  border-radius: 10px;
  border: none;
 }

<div class="card">
  <img src="https://images.unsplash.com/photo-1621259182978-fbf93132d53d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8eGJveHxlbnwwfHwwfHw%3D&w=1000&q=80">
  <h2>X Box SX</h2>    
  <button class="card_button">Ver Ofertas</button>    
</div>

赞(0）回复(0）举报 2023-03-05

我来回答

css 覆盖边界的图像[已关闭]

2条答案

相关问题

热门标签

最新问答