如何在左側角落放置漸變？

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

我認為適當的漸變背景看起來像這樣：

  .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); } 

 <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> 

另外，您可以使用以下很酷的網站輕松創建自己的CSS自定義漸變背景： http : //www.colorzilla.com/gradient-editor/它具有非常簡單的編輯器，並可以生成所需漸變的CSS輸出