it-swarm.asia

التدرج العلوي والسفلي باستخدام CSS

لدي خلفية بها تدرج علوي وسفلي وأريد أن تظهر على طبقة حاوية. المشكلة هي التدرج السفلي لأنه يجب أن يظهر في نهاية div الحاوية. أيه أفكار؟ وإليك بعض الأمثلة على الصورة imgur code:

<style>
    .container{background: #fff url(images/bg.png) repeat-x;}
</style>

<div class="container">
    <div id="content">
        <p>Dynamic stuff goes in here that differs on every page</p>
    </div> 
</div>

http://imgur.com/XAaIx

يظهر الرمز أعلاه التدرج في الأعلى فقط ، ولكن هل هناك طريقة أخرى لتحقيق هذا التأثير؟

csshtmlwebsite-design
2
J Lee

يمكنك تجربة شيء مثل:

<style> 
    .container{background: #fff url(images/bg_bottom_gradient.png) repeat-x;} 
    .subcontainer{margin: 0 auto;background-image:url(images/bg_top_gradient.png);background-repeat: repeat-x;}
</style> 

<div class="container">
  <div class="subcontainer">
    <div id="content"> 
        <p>Dynamic stuff goes in here that differs on every page</p> 
    </div> 
  </div> 
</div>

تم تعديله لإضافة نمط جديد:

4
Joel Etherton

يمكنك استخدام قواعد المغلق لخلفيات متعددة

div.container {
background-image: url(images/bg_top.png), url(images/bg_bottom.png);
background-repeat: repeat-x;
background-position: top left, bottom left;
}

التي يجب أن تعمل.

1
Merstzik