كيفية إضافة صورة خلفية باستخدام CSS التي تبدو وكأنها حدود أسفل كل جانب

Question

أساسا أريد إنشاء حد مخصص، أسفل الجانب الأيمن والأيمن من المحتوى الخاص بي. لقد تمكنت من إنشاء شيء يعمل نصف. المشكلة التي أحصل عليها محاذاة Divs بحيث تدفقها إلى المحتوى DIV وتبدو وكأنها حدود بدلا من الخطوط العائمة. من الصعب شرح ذلك، يرجى الاطلاع على صورة الهجوم لما أريد.

هتافات

نأمل أنني جعلت بعض الاشياء.

النص البديل http://www.webquark.co.uk/shadowed-borders.jpg.

Answer 1

تسمى التقنية الأساسية "أعمدة FAUX"، وهي موضحة في مقالة بنفس الاسم. وبعد تغطي المقالة كيفية استخدامها "للتستر" للأربعة الشرجية العائمة، لكنها نفس المبدأ الأساسي لما تريد تحقيقه.

Answer 2

يجب عليك إنشاء صورة نقطية عالية 1 بكسل تغطي الظلال الإقليمية 2، ووضعها كخلفية من فحمك الأكثر خارجية (أو يمكنك وضعه في الجسم). مركز عليه وضبط background-repeat ل repeat-y.

يتم استخدام هذه التقنية في هذا الموقع علي سبيل المثال. يستخدم هذا CSS:

body { 
  background-attachment: scroll;
  background-repeat: repeat-y;
  background-position: 50% 0px;
  background-color: #e8b36d;
  background-image: url("images/bg_center_orange.gif");
}

Answer 3

قم بإنشاء PNG واسعة مثل التفاف الخاص بك وقم بتعيينه كخلفية إلى التفاف:

CSS:

div#wrap {
    background: url('drop-shadow.png') repeat-y;
    width: // the width of #wrap should be the same as the width of the background image
}

لغة البرمجة:

<div id="wrap">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

من المحتمل أنك تريد بعض الهوامش أو الحشو على Divs الداخلية بحيث لا يغطي المحتوى الظلال الخاصة بك.