我有带渐变的列。需要创建一个从右上角到左下角的渐变,但渐变的 Angular 被剪掉了。 它看起来很丑,而且渐变的 Angular 没有链接。我尝试使用背景图片,但在移动设备上效果不佳。
<section class="slider">
<div class="container slider-menu">
<div class="col-lg-5ths col-md-5ths col-sm-5ths col-xs-4"><img src="http://rustypepper.me/production/img/icon-2.png" alt="Шарики" class="img-responsive">
<p>
Lorem <br> Ipsum
</p>
</div>
// ........ 14 same columns
</section>
.slider-menu div {
background: #006bac;
position: relative;
margin-bottom:5px;
height: 240px; }
.slider-menu div img {
position: relative;
z-index: 999; }
.slider-menu div:after {
content: "";
position: absolute;
top: 0;
left: 0;
opacity: 0.1;
width: 100%;
height: 100%;
z-index: 1;
background: black;
/* Old browsers */
background: -moz-linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, black), color-stop(51%, white), color-stop(51%, black), color-stop(100%, white));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%);
/* IE10+ */
background: linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */ }
.slider-menu img {
display: block;
margin: 0 auto; }
.slider-menu p {
text-align: center;
color: #fff;
margin-top: 20px; }
最佳答案
另一种解决方案是使用符号名称设置 Angular
background: linear-gradient(to top right, black 0%, white 51%, black 51%, white 100%);
这样,渐变将适应容器尺寸,而不是使尺寸适应渐变 Angular
关于html - 如何创建从一个 Angular 到另一个 Angular 的对 Angular 渐变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31501299/