पारदर्शी पाठ पृष्ठभूमि से कट गया

90

क्या सीएसएस के साथ, निम्नलिखित छवि में एक पृष्ठभूमि प्रभाव से बाहर पारदर्शी पाठ बनाने का कोई तरीका है ?
पाठ की जगह छवियों के कारण सभी कीमती एसईओ खोना दुखद होगा।

पारदर्शी पाठ पृष्ठभूमि से कट गया

मैंने पहले छाया के बारे में सोचा लेकिन मैं कुछ भी समझ नहीं पाया ...

छवि साइट पृष्ठभूमि है, एक निरपेक्ष पद <img>टैग है

css  svg  fonts  css-shapes 
— प्यार करने वाला
स्रोत
"पाठ की जगह छवियों के कारण सभी कीमती एसईओ खो देते हैं।" मौजूदा छवि प्रतिस्थापन तकनीकें भी हैं, जो अभी भी SO के अनुकूल हैं। BTW: वास्तव में अक्षरों के पीछे की पृष्ठभूमि को भी पारदर्शी रहने की आवश्यकता है, जो यहाँ समस्या है ...
— फीतेला
हाँ, यह एक महान अभ्यास होगा, यदि संभव हो तो सीएसएस के साथ ...
— जेसिका लिंगम
मुझे ऐसा कोई कारण नहीं दिख रहा है <h1><img alt="Some Text" /></h1>जो किसी भी एसईओ से कम अनुकूल हो <h1>Some Text</h1>। परंपरागत रूप से, छवियों के साथ समस्या यह रही है कि उन्हें पृष्ठ पर बिना किसी सहायक मार्कअप के डंप किया गया है।
— cimmanon
@cimmanon हाँ, आप सही कह रहे हैं। मैं शायद एसईओ बिंदुओं को खोए बिना छवियों का उपयोग कर सकता हूं, लेकिन आप अभी भी पाठ का चयन नहीं कर सकते हैं, पृष्ठ पर खोज करें, लिंक करना अधिक जटिल होगा, और पाठ को अपडेट करने के लिए यह बहुत अधिक काम होगा ...:
— Love Dager
2
जैसा कि आप जानते हैं, Google CSS छवि प्रतिस्थापन तकनीकों से पूरी तरह से ठंडा है: mezzoblue.com/archives/2008/05/05/image_replac
— cimmanon

जवाबों:

46

यह css3 के साथ संभव है लेकिन यह सभी ब्राउज़रों में समर्थित नहीं है

पृष्ठभूमि-क्लिप के साथ: पाठ; आप पाठ के लिए एक पृष्ठभूमि का उपयोग कर सकते हैं, लेकिन आपको इसे पृष्ठ की पृष्ठभूमि के साथ संरेखित करना होगा

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;
}
<h1><span>ABCDEFGHIKJ</span></h1>
स्निपेट का विस्तार करें

http://jsfiddle.net/JGPuZ/1337/

स्वचालित संरेखण

एक छोटी जावास्क्रिप्ट के साथ आप पृष्ठभूमि को स्वचालित रूप से संरेखित कर सकते हैं:

$(document).ready(function(){
  //Position of the header in the webpage
  var position = $("h1").position();
  var padding = 10; //Padding set to the header
  var left = position.left + padding;
  var top = position.top + padding;
  $("h1").find("span").css("background-position","-"+left+"px -"+top+"px"); 
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>ABCDEFGHIKJ</span></h1>
स्निपेट का विस्तार करें

http://jsfiddle.net/JGPuZ/1336/

— गिज्स
स्रोत
आप लोग बहुत तेज़ हैं: D
— Gijs
बहुत अच्छे! मैं घर मिलते ही ऑटो अलाइनमेंट का परीक्षण करूंगा! धन्यवाद! : डी
— लव डिगर १12
आपको माई कोड को थोड़ा बदलने की आवश्यकता है, स्थिति पर निर्भर करता है, अब यह अन्य तत्वों के साथ संघर्ष कर सकता है और यह एक बहुत तेजी से लिखा गया था, अगर आपके कोई प्रश्न हैं तो मैं उन्हें सुनूंगा
— गीज
3
उत्तर की अवहेलना करने के लिए नहीं, जो वास्तव में अच्छा समाधान है, लेकिन background-clip:textवेबकिट-केवल, गैर-मानक विकल्प है। CSS3 textइस विशेषता के लिए मान की अनुमति नहीं देता ( देखें )।
— तानीस
1
यह तकनीक आपको उस तत्व की पृष्ठभूमि को देखने की अनुमति देती है जहां पाठ सामान्य रूप से होगा। मैं यह देखने के लिए एक मार्ग की तलाश कर रहा हूं कि पाठ के साथ उस तत्व के तहत क्या जगह है जहां पाठ सामान्य रूप से होगा।
— विंस
49

यद्यपि यह सीएसएस के साथ संभव है, एसवीजी मास्किंग के साथ एक इनलाइन एसवीजी का उपयोग करने के लिए एक बेहतर दृष्टिकोण होगा । इस दृष्टिकोण के सीएसएस पर कुछ फायदे हैं:

कोडपेन डेमो: एसवीजी टेक्स्ट मास्क

पारदर्शी पाठ कतरन पृष्ठभूमि

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%;}
<svg viewbox="0 0 100 60">
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>    
</svg>
स्निपेट का विस्तार करें

यदि आप पाठ को चयन करने योग्य और खोज योग्य बनाने के उद्देश्य से हैं, तो आपको इसे <defs>टैग के बाहर सम्मिलित करने की आवश्यकता है । निम्नलिखित उदाहरण <use>टैग के साथ पारदर्शी पाठ रखने का एक तरीका दिखाता है :

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%;}
<svg viewbox="0 0 100 60">
  <defs>
    <g id="text">
      <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
    </g>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <use xlink:href="#text" />
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>
  <use xlink:href="#text" mask="url(#mask)" />
</svg>
स्निपेट का विस्तार करें

— वेब Tiki
स्रोत
2
यह एकमात्र समाधान प्रतीत होता है जो आज क्रॉस ब्राउज़र का काम करता है: IE11, FF, Chrome, Safari। और वेब के चारों ओर समस्या के लिए प्रदान किए गए कई अन्य समाधानों की पृष्ठभूमि के रूप में छवि की आवश्यकता नहीं है।
— तिमो Khkönen
1
इस उत्तर से प्रेरित होकर मैंने एक कीफ्रेम एनीमेशन बनाया, जिसमें सफेद एसवीजी-टेक्स्ट पर सफेद गोल आयताकार घूमता है। पृष्ठभूमि में पाठ और चित्र हैं। जाओ और देखो: jsbin.com/nipuqu/3 (विश्व चैंपियनशिप आ रही है :))
— टिमो किक्कोन
2
अच्छा समाधान है, लेकिन चूंकि "पाठ का चयन करें और पृष्ठ पर खोज करें" ओपी की आवश्यकताओं में प्रतीत होता है, आप भाग के <text>बाहर शामिल करना चाह सकते हैं <defs>। (btw मुझे यकीन नहीं है कि कैसे एसई क्रॉलर दोषों में एसवीजी सामग्री से निपटते हैं)। यहाँ एक तरीका है कि ओपी क्या चाहता है, एक भयानक एफएफ बग शोषण के साथ: jsfiddle.net/tfneqxxb
— काइदो
यदि पाठ गतिशील है तो क्या होगा? यह ऑटो की चौड़ाई को समायोजित नहीं करता है।
— इमरान बुगियो
1
@ImranBughio नहीं यह नहीं है। SVG टेक्स्ट सादे HTML टेक्स्ट की तरह काम नहीं करता है। आप इसे स्थिति के लिए nee। अधिक जानकारी के लिए यहां
— वेब-टिक
16

एक तरीका जो अधिकांश आधुनिक ब्राउज़रों (यानी, किनारे को छोड़कर) पर काम करता है, हालांकि केवल एक काली पृष्ठभूमि के साथ उपयोग करना है

background: black;
color: white;
mix-blend-mode: multiply;

अपने टेक्स्ट एलिमेंट में और उसके बाद आप जो भी बैकग्राउंड चाहते हैं उसे डाल दें। मूल रूप से मूल रूप से 0-255 रंग कोड को 0-1 में मैप करता है और फिर जो कुछ भी इसके पीछे है, उसे गुणा करता है, इसलिए काला 1 से काले और सफेद रंग से गुणा करता है और प्रभावी रूप से पारदर्शी हो जाता है। http://codepen.io/nic_klaassen/full/adKqWX/

— Nic
स्रोत
3
काले रंग के उपयोग के साथ सफेद पृष्ठभूमि के लिए color-dodge, lightenया screenपरmix-blend-mode
— इमरान Bughio
3

यह है संभव है, लेकिन अभी तक केवल वेबकिट आधारित ब्राउज़रों के साथ (क्रोम, सफारी, RockMelt, कुछ भी क्रोमियम परियोजना पर आधारित।)

चाल में एक तत्व सफेद -webkit- background-clip: text;के भीतर होता है जिसमें शरीर के समान पृष्ठभूमि होती है, फिर आंतरिक तत्व पर उपयोग करें जिसका मूल अर्थ है "पाठ से परे पृष्ठभूमि का विस्तार न करें" और पारदर्शी पाठ का उपयोग करें।

section
{
    background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg);
    width: 100%;
    height: 300px;
}

div
{
    background: rgba(255, 255, 255, 1);
    color: rgba(255, 255, 255, 0);

    width: 60%;
    heighT: 80%;
    margin: 0 auto;
    font-size: 60px;
    text-align: center;
}

p
{
    background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg);
    -webkit-background-clip: text;
}
​

http://jsfiddle.net/BWRsA/

— केली
स्रोत
शांत चाल! लेकिन अब सब कुछ ठीक से संरेखित करने के लिए एक कुतिया होगी ..!
— लव डगर
हाँ, यह इसके साथ एक और समस्या है। यह अभी भी विकास में है और मुझे पूरी उम्मीद है कि हम जल्द ही ऐसा कुछ देखेंगे! :)
— काइल
इसके अलावा, आप हमेशा छवि पर पारदर्शी पाठ पर परत कर सकते हैं, ताकि यह अभी भी चयन करने योग्य हो। लेकिन मुझे यकीन है कि यह एसईओ के लिए बुरा अभ्यास है .. छिपे हुए संदेश / कीवर्ड और ऐसे।
— काइल
मुझे यकीन है कि यह वेबकिट ब्राउज़र में बहुत अच्छा लग रहा है, लेकिन बाकी सभी के लिए यह कुछ घास के ऊपर एक अर्ध-पारदर्शी सफेद बॉक्स है।
— cimmanon
1
आह, दोस्तों चलो ... हाँ मैं इसे उत्पादन में उपयोग करने की योजना बना रहा हूं। लेकिन निश्चित रूप से एक कमबैक के बिना नहीं! @ कैमिमन
— लव
2

मुझे लगता है कि आप ऐसा कुछ हासिल कर सकते हैं उपयोग करकेbackground-clip , लेकिन मैंने अभी तक इसका परीक्षण नहीं किया है।

इस उदाहरण देखें:
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
(वेबकिट केवल, मैं अभी तक पता नहीं एक सफेद एक के लिए काले रंग की पृष्ठभूमि को बदलने का तरीका)

— feeela
स्रोत
हाँ, यह काम कर सकता है! धन्यवाद, अब सब कुछ सही ढंग से संरेखित करने के लिए .. धिक्कार है .. -।-
— प्यार पेज
2

मैंने सिर्फ गड़बड़ करते समय ऐसा करने का एक नया तरीका खोजा, मुझे पूरी तरह से यकीन नहीं है कि यह कैसे काम करता है (यदि कोई और व्यक्ति कृपया मुझे समझाना चाहता है)।

यह बहुत अच्छी तरह से काम करता है, और इसके लिए किसी डबल बैकग्राउंड या जावास्क्रिप्ट की आवश्यकता नहीं है।

यहाँ कोड है: JSFIDDLE 

body {
  padding: 0;
  margin: 0;
}

div {
  background: url(http://www.color-hex.com/palettes/26323.png) repeat;
  width: 100vw;
  height: 100vh;
}

body::before {
  content: '$ALPHABET';
  left: 0;
  top: 0;
  position: absolute;
  color: #222;
  background-color: #fff;
  padding: 1rem;
  font-family: Arial;
  z-index: 1;
  mix-blend-mode: screen;
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: 1rem;
}
<div></div>
स्निपेट का विस्तार करें

— ChrisBrownie55
स्रोत
1

आप एक औंधा / नकारात्मक / रिवर्स फ़ॉन्ट का उपयोग कर सकते हैं और इसके साथ आवेदन कर सकते हैंfont-face="…" सीएसएस नियम के । अक्षरों के बीच के छोटे सफेद अंतराल से बचने के लिए आपको अक्षर रिक्ति के साथ खेलना पड़ सकता है।

यदि आपको किसी विशिष्ट फ़ॉन्ट की आवश्यकता नहीं है, तो यह सरल है। उदाहरण के लिए, उलटे फोंट के इस संग्रह से एक लाइक करने योग्य डाउनलोड करें ।

यदि आपको एक विशिष्ट फ़ॉन्ट ("ओपन संस") की आवश्यकता है, तो यह मुश्किल है। आपको अपने मौजूदा फ़ॉन्ट को उल्टे संस्करण में बदलना होगा। यह फॉन्ट क्रिएटर, FontForge आदि के साथ मैन्युअल रूप से संभव है, लेकिन निश्चित रूप से हम एक स्वचालित समाधान चाहते हैं। मुझे अभी तक उसके लिए निर्देश नहीं मिले, लेकिन कुछ संकेत:

— tanius
स्रोत
1

आप myadzel का उपयोग कर सकते Patternizer jQuery प्लगइन ब्राउज़रों में इस प्रभाव को प्राप्त करने के लिए। इस समय, बस CSS के साथ ऐसा करने के लिए कोई क्रॉस-ब्राउज़र तरीका नहीं है।

आप class="background-clip"HTML तत्वों को जोड़कर प्रतिमानक का उपयोग करते हैं जहाँ आप चाहते हैं कि पाठ को एक छवि पैटर्न के रूप में चित्रित किया जाए, और एक अतिरिक्त data-pattern="…"विशेषता में छवि को निर्दिष्ट करें । डेमो का स्रोत देखें । पैटर्नाइज़र पैटर्न-भरे पाठ के साथ एक एसवीजी छवि बनाएगा और इसे पारदर्शी रूप से प्रदान किए गए HTML तत्व को रेखांकित करेगा।

यदि, प्रश्न के उदाहरण की छवि के अनुसार, पाठ भरण पैटर्न "पैटर्नयुक्त" तत्व से परे फैली पृष्ठभूमि छवि का एक हिस्सा होना चाहिए, तो मुझे दो विकल्प दिखाई देते हैं (अप्रयुक्त, मेरा पसंदीदा पहला):

  • एसवीजी में पृष्ठभूमि छवि के बजाय मास्किंग का उपयोग करें। जैसा कि वेब-टिकी के उत्तर में , जिसके प्रतिमान का उपयोग करके अभी भी एसवीजी की स्वचालित पीढ़ी और शीर्ष पर एक अदृश्य एचटीएमएल तत्व जोड़ा जाएगा जो पाठ चयन और प्रतिलिपि बनाने की अनुमति देता है।
  • या पैटर्न छवि के स्वचालित संरेखण का उपयोग करें। Gijs के उत्तर के समान जावास्क्रिप्ट कोड के साथ किया जा सकता है ।
— tanius
स्रोत
1

बस उस सीएसएस डाल दिया

    .banner-sale-1 .title-box .title-overlay {
      font-weight: 900;
      overflow: hidden;
      margin: 0;
      padding-right: 10%;
      padding-left: 10%;
      text-transform: uppercase;
      color: #080404;
      background-color: rgba(255, 255, 255, .85);

      /* that css is the main think (mix-blend-mode: lighten;)*/
      mix-blend-mode: lighten;

    }
— rashed
स्रोत
1

डेमो स्क्रीनशॉट

मुझे पाठ बनाने की ज़रूरत थी जो बिल्कुल उसी तरह दिखता था जैसा वह मूल पोस्ट में करता है, लेकिन मैं बैकग्राउंड को लाइन करके इसे नकली नहीं बना सकता, क्योंकि तत्व के पीछे कुछ एनीमेशन है। किसी को भी अभी तक यह सुझाव नहीं दिया गया है, इसलिए यहां मैंने क्या किया है: (इसे यथासंभव पढ़ने में आसान बनाने की कोशिश की।)

var el = document.body; //Parent Element. Text is centered inside.
var mainText = "THIS IS THE FIRST LINE"; //Header Text.
var subText = "THIS TEXT HAS A KNOCKOUT EFFECT"; //Knockout Text.
var fontF = "Roboto, Arial"; //Font to use.
var mSize = 42; //Text size.

//Centered text display:
var tBox = centeredDiv(el), txtMain = mkDiv(tBox, mainText), txtSub = mkDiv(tBox),
ts = tBox.style, stLen = textWidth(subText, fontF, mSize)+5; ts.color = "#fff";
ts.font = mSize+"pt "+fontF; ts.fontWeight = 100; txtSub.style.fontWeight = 400;

//Generate subtext SVG for knockout effect:
txtSub.innerHTML =
"<svg xmlns='http://www.w3.org/2000/svg' width='"+stLen+"px' height='"+(mSize+11)+"px' viewBox='0 0 "+stLen+" "+(mSize+11)+"'>"+
    "<rect x='0' y='0' width='100%' height='100%' fill='#fff' rx='4px' ry='4px' mask='url(#txtSubMask)'></rect>"+
    "<mask id='txtSubMask'>"+
        "<rect x='0' y='0' width='100%' height='100%' fill='#fff'></rect>"+
        "<text x='"+(stLen/2)+"' y='"+(mSize+6)+"' font='"+mSize+"pt "+fontF+"' text-anchor='middle' fill='#000'>"+subText+"</text>"+
    "</mask>"+
"</svg>";

//Relevant Helper Functions:
function centeredDiv(parent) {
    //Container:
    var d = document.createElement('div'), s = d.style;
    s.display = "table"; s.position = "relative"; s.zIndex = 999;
    s.top = s.left = 0; s.width = s.height = "100%";
    //Content Box:
    var k = document.createElement('div'), j = k.style;
    j.display = "table-cell"; j.verticalAlign = "middle";
    j.textAlign = "center"; d.appendChild(k);
    parent.appendChild(d); return k;
}
function mkDiv(parent, tCont) {
    var d = document.createElement('div');
    if(tCont) d.textContent = tCont;
    parent.appendChild(d); return d;
}
function textWidth(text, font, size) {
    var canvas = window.textWidthCanvas || (window.textWidthCanvas = document.createElement("canvas")),
    context = canvas.getContext("2d"); context.font = size+(typeof size=="string"?" ":"pt ")+font;
    return context.measureText(text).width;
}

बस अपने window.onload में फेंक दें, शरीर की पृष्ठभूमि को अपनी छवि पर सेट करें, और जादू देखें!

— Pecacheu
स्रोत
0

सीएसएस के साथ संभव नहीं है बस अब मुझे डर है।

आपकी सबसे अच्छी शर्त केवल एक छवि (शायद एक पीएनजी) का उपयोग करना है और उस पर अच्छा ऑल्ट / टाइटल टेक्स्ट रखना है।

वैकल्पिक रूप से आप एक SPAN या DIV का उपयोग कर सकते हैं और एक पृष्ठभूमि के रूप में छवि है कि आप अपने पाठ के साथ इसके अंदर एसईओ उद्देश्यों के लिए चाहते हैं, लेकिन पाठ बंद स्क्रीन।

— बिली मूरत
स्रोत
हां आप ठीक हैं। मैं शायद एसईओ अंक खोने के बिना छवियों का उपयोग कर सकता है, लेकिन आप अभी भी पृष्ठ पर खोज करते हैं, पाठ का चयन नहीं कर सकते, जोड़ने और अधिक जटिल हो जाएगा, और यह पाठ अद्यतन करने के लिए ... एक बहुत अधिक काम हो जाएगा: /
— प्यार Dager
0

mix-blend-mode इस तरह के प्रभाव के लिए एक संभावना भी है।

mix-blend-modeसीएसएस संपत्ति सेट कैसे एक तत्व की सामग्री एलीमेंट की पेरेंट सामग्री और तत्व की पृष्ठभूमि के साथ मिश्रण होना चाहिए।

h1 {
background:white;
mix-blend-mode:screen;

/* demo purpose from here */
padding:0.25em;
mix-blend-mode:screen;
}


html {
background:url(https://i.picsum.photos/id/1069/367/267.jpg?hmac=w5sk7UQ6HGlaOVQ494mSfIe902cxlel1BfGUBpEYoRw)center / cover ;
min-height:100vh;
display:flex;
}
body {margin:auto;}
h1:hover {border:dashed 10px white;background-clip:content-box;box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px #fff}
<h1>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
स्निपेट का विस्तार करें

— जी Cyrillus
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.