主页 / 问题 / 811150
Accepted
Eugen Eray
Asked:2020-04-08 17:31:55 +0000 UTC2020-04-08 17:31:55 +0000 UTC

部分图片被剪掉

  • 772

我想快点补上，但后来我遇到了一个问题：盘子的一部分被切掉了。我只是不明白为什么。帮助请。

body {
  background-color: grey;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  cursor: pointer;
}

.vinylwheel {
  width: 100%;
  height: 100%;
  background: no-repeat url("http://www.stickpng.com/assets/images/5856b3da4f6ae202fedf2794.png");
  background-size: 100% auto;
  margin: auto;
}

.mid {
  border-radius: 50%;
  width: 32%;
  background: no-repeat url("https://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc301ae4b01342ae9212a1/1442590746805/");
  background-size: 100% auto;
  background-position: center;
  margin: auto;
  transform: translateY(97%);
  text-align: center;
}

.btm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

#play {
  width: auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: white;
  border: 0;
  text-align: center;
  display: inline;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />

<div class="btn">
  <center>
    <button id="play">adf</button>
  </center>
</div>
<div class="vinylwheel">
  <div class="mid">
    <img src="https://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc301ae4b01342ae9212a1/1442590746805/" alt="mid" style=" width: 100%; opacity: 0; visibility: hidden; z-index: -1;" />
  </div>
</div>

html

2 个回答

  1. Best Answer

    所以更漂亮

    * {
  margin: 0;
  padding: 0;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.vinil {
  width: 30vw;
  height: 30vw;
  position: relative;
}

.vinil:before {
  content: "lensky";
  display: block;
  width: 9.3vw;
  height: 9.3vw;
  background: #aa0000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -4.6vw;
  color: #fbfbfb;
  font-size: 2vw;
  text-align: center;
  line-height: 10vw;
  font-variant: small-caps;
  font-weight: 800;
}
    <div class="vinil">
  <img src="http://www.stickpng.com/assets/images/5856b3da4f6ae202fedf2794.png" alt="">
</div>

    • 3

  2. 因为带有背景的块的高度小于图像本身

    body {
  background-color: grey;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  cursor: pointer;
}

.vinylwheel {
  width: 100%;
  height: 600px;
  background: no-repeat url("http://www.stickpng.com/assets/images/5856b3da4f6ae202fedf2794.png");
  background-size: 100% auto;
  margin: auto;
}

.mid {
  border-radius: 50%;
  width: 32%;
  background: no-repeat url("https://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc301ae4b01342ae9212a1/1442590746805/");
  background-size: 100% auto;
  background-position: center;
  margin: auto;
  transform: translateY(97%);
  text-align: center;
}

.btm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

#play {
  width: auto;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: white;
  border: 0;
  text-align: center;
  display: inline;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />

<div class="btn">
  <center>
    <button id="play">adf</button>
  </center>
</div>
<div class="vinylwheel">
  <div class="mid">
    <img src="https://static1.squarespace.com/static/55fc0004e4b069a519961e2d/t/55fc301ae4b01342ae9212a1/1442590746805/" alt="mid" style=" width: 100%; opacity: 0; visibility: hidden; z-index: -1;" />
  </div>
</div>

    • 0

相关问题