CMS Development

TYu
メンバー

CSS - linear-gradient background not showing

解決

We used linear-gradient as background-image for the header.

When every words fit into 1 line, it shows up as we want (photo1)

But the problem is that when the size of the word is larger, the second line just disappear.

 

photo1.png

 

photo2.png

 

Any one has any ideas ? Thanks a lot!

 

Here's the code in the module:

 

.custom-leaders .top-content h2 span{
color: rgb(5, 204, 152);
text-shadow: rgba(255, 255, 255, 0.2) 0px 2px 3px;
}

@supports (-webkit-background-clip: text) or (-moz-background-clip:text) or (background-clip:text) {
.custom-leaders .top-content h2 span{
background-image: linear-gradient(to top, rgb(22, 173, 248), rgb(120, 217, 244));
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
}

 

 

0 いいね!
1件の承認済みベストアンサー
Anton
解決策
名誉エキスパート | Diamond Partner
名誉エキスパート | Diamond Partner

CSS - linear-gradient background not showing

解決

Hi @TYu

I've tested your page on my Windows machine in Chrome, Firefox, Edge and IE(worst possible browser imo) 

result: I couldn't recreate this issue. 
On my mac on the other hand Safari was displaying the issue as you've described. 

Adding a "display: block" to the corresponding class fixed the issue in Safari. 

@supports (-webkit-background-clip: text) or (-moz-background-clip:text) or (background-clip:text) {
.custom-leaders .top-content h2 span{
background-image: linear-gradient(to top, rgb(22, 173, 248), rgb(120, 217, 244));
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
display:block;
}
}

 

 

best, 

Anton 

Anton Bujanowski Signature

元の投稿で解決策を見る

6件の返信
webdew
ガイド役 | Diamond Partner
ガイド役 | Diamond Partner

CSS - linear-gradient background not showing

解決

Hi @TYu ,

I have checked that the code has provided is working on my end. Check this SS https://prnt.sc/12griov .
Can you share the link with us so that we can check whats the issue here?

Best Regards.

0 いいね!
TYu
メンバー

CSS - linear-gradient background not showing

解決

Hi webdew,

 

The solution from Anton work well.

Here's the link I had issue before:

https://www.palo-it.com/es/events/ideathon-4-good-techo

 

Thanks! 

Anton
名誉エキスパート | Diamond Partner
名誉エキスパート | Diamond Partner

CSS - linear-gradient background not showing

解決

Hi @TYu

could you provide a preview link please? It's kinda hard to test things just from code 😏

 

You could try to remove

color: transparent;

from the @support media query in the meantime

 

 

best

Anton

Anton Bujanowski Signature
TYu
メンバー

CSS - linear-gradient background not showing

解決

Thanks for your reply Anton!

 

Currently I modify the size of the header to let it appear normally.

 

To re-produce this issue:

1. Go to this link with Safari https://www.palo-it.com/es/events/ideathon-4-good-techo

2. Then you right click to Inspect Elements

3. Scroll down to find the element as attached image 1. Click on it and check the style, you'll see the font-size is 1.7rem (see image1);

4. Change the size to 3rem to make it larger so it'll need to occupy two lines. Then you'll see the second line appear werid (see image2).

image1

image1.png

 

image2

image2.png

  

Let me know if this is clear, thank you 🙂

0 いいね!
Anton
解決策
名誉エキスパート | Diamond Partner
名誉エキスパート | Diamond Partner

CSS - linear-gradient background not showing

解決

Hi @TYu

I've tested your page on my Windows machine in Chrome, Firefox, Edge and IE(worst possible browser imo) 

result: I couldn't recreate this issue. 
On my mac on the other hand Safari was displaying the issue as you've described. 

Adding a "display: block" to the corresponding class fixed the issue in Safari. 

@supports (-webkit-background-clip: text) or (-moz-background-clip:text) or (background-clip:text) {
.custom-leaders .top-content h2 span{
background-image: linear-gradient(to top, rgb(22, 173, 248), rgb(120, 217, 244));
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
display:block;
}
}

 

 

best, 

Anton 

Anton Bujanowski Signature
TYu
メンバー

CSS - linear-gradient background not showing

解決

Hi @Anton ,

 

Your suggestion works!

 

Thanks a lot!

 

Best,

Tin