国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

communauté

Apprendre

Bibliothèque d'outils

Outils d'IA

Loisirs

Fran?ais

L'arrière-plan et le texte transparent sont coupés

P粉439804514 2024-03-25 16:47:36

899

Existe-t-il un moyen d'utiliser CSS pour créer l'effet couper le texte transparent à partir de l'arrière-plan comme indiqué ci-dessous??

Il serait dommage de perdre tout ce précieux référencement car les images remplacent le texte.

J'ai d'abord pensé aux ombres mais je ne pouvais penser à rien...

Cette image est l'arrière-plan du site Web, positionné de manière absolue <img> tag

P粉439804514

répondre à tous(2)

P粉2001385102024-03-26 10:05:53 2 plancher

Bien que cela puisse être réalisé avec CSS, une meilleure approche consiste à utiliser Inline SVG avec SVG Masks. Cette approche présente certains avantages par rapport au CSS?:

Meilleure prise en charge des navigateurs?: IE10+, chrome, Firefox, safari...
Cela n'affecte pas le référencement car les robots peuvent explorer le contenu SVG (Google indexe le contenu SVG depuis 2010)

Démo CodePen?: Masquage de texte SVG

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}

Si votre objectif est de rendre le texte sélectionnable et consultable, vous devez l'inclure dans la balise <defs> 標記之外。以下示例顯示了一種使用 < 保留透明文本的方法使用>?:

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}

Comme +0

Ajouter une réponse

P粉3511384622024-03-26 00:19:58 1 plancher

CSS3 peut être implémenté, mais tous les navigateurs ne le prennent pas en charge

Avec clip de fond : texte vous pouvez utiliser un fond de texte mais il doit être aligné avec le fond de la page

body {
    background: url(http://www.color-hex.com/palettes/26323.png) repeat;
    margin:10px;
}
h1 { 
    background-color:#fff;
    overflow:hidden;
    display:inline-block; 
    padding:10px; 
    font-weight:bold;
    font-family:arial;
    color:transparent;
    font-size:200px;
}
span { 
    background: url(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}