Question

我有DoubleBuffer背景图片。

在其中我有一个<div class="wrapper">，它的高度和宽度都是100％。

我想给<div class="inner">一个来自左上角的径向背景。

我可以使用.inner定位，但background-position: value;的宽度会因屏幕尺寸而异。

HTML

.wrapper

CSS

<div class="wrapper">
   <div class="inner">
      <h3> title </h3>
   </div>
</div>

Answer 1

这是你想要完成的事情：

body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url(https://pixabay.com/static/uploads/photo/2016/01/11/22/05/background-1134468_960_720.jpg) top left no-repeat;
  background-size: cover;
}

.inner {
  position: absolute;
  padding: 15px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: -moz-linear-gradient(-45deg,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(135deg,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}

<div class="wrapper">
   <div class="inner">
      <h3> title </h3>
   </div>
</div>

如何相应地将css径向渐变定位到左上角？

1 个答案: