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

Question

我有一个带有背景图像的<div class="wrapper"> 。

在里面，我有一个<div class="inner"> ，它是100％的高度和宽度。

我想给.inner一个源自.inner的放射状背景。

我可以用background-position: value;来定位它background-position: value; 但是.wrapper的宽度将取决于屏幕尺寸。

HTML

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

CSS

.wrapper{
background-image:url('www.example.com/example.png')
}
.inner{
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

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>