सीएसएस पृष्ठभूमि छवि स्थिति (नकारात्मक स्थिति?)

मैं एक आइकन जोड़ने की कोशिश कर रहा हूं जो सीमा के शीर्ष पर बैठता है, इसे आधा में विभाजित करता है।सीएसएस पृष्ठभूमि छवि स्थिति (नकारात्मक स्थिति?)

यहाँ मैं अब तक है:

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
    <title>Untitled Document</title> 
    <style type="text/css"> 
     body { 
      background-color:#26140C; 
     } 

     .box { 
      width: 800px; 
      margin: 0 auto; 
      margin-top: 40px; 
      padding: 10px; 
      border: 3px solid #A5927C; 

      background-color: #3D2216; 
      background-image: url(Contents/img/icon_neutral.png); 
      background-repeat: no-repeat; 
      background-position:10px -20px; 
     } 
    </style> 
</head> 
<body> 
    <div class="box"> 
     <h1>This is a test!</h1> 
    </div> 
</body>

के बजाय छवि सीमा पर किया जा रहा है जैसे मैं उम्मीद कर रहा था, इसके इसके तहत।

स्रोत

2009-06-28 Bryce Fischer

पृष्ठभूमि छवि बॉक्स के भीतर है इसलिए इसे बाहर ले जाना इस तरह संभव नहीं है। आप क्या कर सकते हैं अपनी छवि को बॉक्स के बाहर रखें और इसे इसमें ले जाएं।

आप इस तरह कुछ कोशिश कर सकते हैं, यह मूर्खतापूर्ण नहीं है लेकिन आपको वहां कुछ रास्ता मिल सकता है।

<html> 
<head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Untitled Document</title> 
     <style type="text/css"> 
       body { 
         background-color:#26140C; 
       } 

       .box { 
         width: 800px; 
         margin: 0 auto; 
         margin-top: 40px; 
         padding: 10px; 
         border: 3px solid #A5927C; 

         background-color: #3D2216; 
       } 

       .image { 
        float: left; 
        position: relative; 
        top: -30px; 
       } 
     </style> 
</head> 
<body> 
     <div class="box"> 
      <img src='icon_neutral.png' class="image" /> 
       <h1>This is a test!</h1> 
     </div> 
</body>

स्रोत

2009-06-28 00:47:47

#box { 
    position:relative; 
} 
#shield { 
    width:41px; 
    height:41px; 
    position:absolute; 
    top:-25px; 
    left:25px; 
} 

<div id="box"> 

    <div id="shield"> 
    <img src="shield.png" /> 
    </div> 

    <h1>Site Title</h1> 

</div>

स्रोत

2009-06-28 00:51:39 Sampson

एक और तरीका है छद्म वर्ग उपयोग कर रहा है: के बाद अपने बॉक्स के बाद एक तत्व इंजेक्षन करने के लिए।

सीएसएस

.box{ 
    position:relative; 
    } 
    .box:after{ 
     content:url(icon_neutral.png); 
     display:block; 
     position:relative; 
     top: -30px; 
    }

एचटीएमएल

<body> 
    <div class="box"> 
     <h1>This is a test!</h1> 
    </div> 
</body>

स्रोत

2011-12-08 23:56:44 gagarine

कुछ मामलों में यह मौजूदा यूआई टूट जाएगा, फिर स्थिति बदलने 'पूर्ण' बनने की कोशिश – didxga

केवल CSS3 का उपयोग कर एक और तरीका नहीं है।

पहले सेट border-top: transparent, background-clip: border-box, फिर नकारात्मक पृष्ठभूमि-स्थिति संभव है। , तो नकारात्मक पृष्ठभूमि स्थिति नहीं रह गया है की आवश्यकता होती है

.box { 
    border-top: 8px solid transparent; 
    background-clip: border-box; 
    background-position: 0 -8px; 

    background-image: url(image.png); 
    background-repeat: repeat-x; 
    /* ... */ 
}

एक और तरीका है एक ही प्रभाव प्राप्त करने के लिए अतिरिक्त background-origin: border-box जोड़कर है।

.box { 
    border-top: 8px solid transparent; 
    background-clip: border-box; 
    background-origin: border-box; 
    background-position: 0 0px; 

    background-image: url(image.png); 
    background-repeat: repeat-x; 
    /* ... */ 
}

और जानकारी:

http://www.css3.info/preview/background-origin-and-background-clip/

स्रोत

2012-08-07 21:11:38 prz

सीएसएस पृष्ठभूमि छवि स्थिति (नकारात्मक स्थिति?)

उत्तर

संबंधित मुद्दे