Question

在优雅主题的Divi主题中，我试图在我的全宽度滑块模块中放置文本背后的渐变。我对渐变区域有问题，因为我无法从图片的左侧开始渐变。

当我在代码中应用渐变时，我的文本的位置也在变化。有人可以帮我解决这个问题吗？这是我正在使用的代码：

<div style="padding: 0px;">
    <strong>&nbsp;</strong>

    &nbsp;

    &nbsp;

    &nbsp;

    &nbsp;

    &nbsp;

    <span style="color: #ffffff;">
        <strong>
            <span style="font-family: 'Times New Roman'; font-size: 54px; background: rgba(0, 0, 0, 0.5); padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 75px;">
                De Banden Specialisten
            </span>
        </strong>
    </span>
</div>

Answer 1

我认为适当的渐变背景看起来像这样：

＆＃13;

        .grad {

          background: rgb(240, 183, 161);

          background: -moz-linear-gradient(-45deg, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 50%, rgba(117, 34, 1, 1) 51%, rgba(191, 110, 78, 1) 100%);

          background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(240, 183, 161, 1)), color-stop(50%, rgba(140, 51, 16, 1)), color-stop(51%, rgba(117, 34, 1, 1)), color-stop(100%, rgba(191, 110, 78, 1)));

          background: -webkit-linear-gradient(-45deg, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 50%, rgba(117, 34, 1, 1) 51%, rgba(191, 110, 78, 1) 100%);

          background: -o-linear-gradient(-45deg, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 50%, rgba(117, 34, 1, 1) 51%, rgba(191, 110, 78, 1) 100%);

          background: -ms-linear-gradient(-45deg, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 50%, rgba(117, 34, 1, 1) 51%, rgba(191, 110, 78, 1) 100%);

          background: linear-gradient(135deg, rgba(240, 183, 161, 1) 0%, rgba(140, 51, 16, 1) 50%, rgba(117, 34, 1, 1) 51%, rgba(191, 110, 78, 1) 100%);

          filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f0b7a1', endColorstr='#bf6e4e', GradientType=1);

        }

＆＃13;

<div style="padding: 0px;">

  <strong>&nbsp;</strong>
  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

  <span style="color: #ffffff;"><strong><span class="grad" style="font-family: 'Times New Roman'; 
        font-size: 54px;  padding-left: 20px; padding-right: 20px; padding-top: 20px; 
        padding-bottom: 75px;">De Banden Specialisten</span>
  </strong>
  </span>

</div>

＆＃13;

另外，您可以使用这个很酷的网站轻松创建自己的CSS自定义渐变背景： http://www.colorzilla.com/gradient-editor/ 它有一个非常简单的编辑器，并生成所需渐变的css输出

如何在左侧角落放置渐变？

1 个答案: