محاذاة الصورة/العفريت لإظهار النصف العلوي والسفلي

أحاول وضع صورة بحيث يكون النصف السفلي معكوس القمة من صورة واحدة ولكن غير متأكد من كيفية القيام بذلك.

JsFiddle

تبدو الصورة نفسها مثل هذا .

EDIT: The final image should look like this.

2

3 إجابة

تحقق من هذه LINK . قد يحل مشكلتك.

2
وأضاف
ذلك رائع. شكرا يا صاح
وأضاف المؤلف tobeeornot, مصدر
سعيد لمساعدتك.)
وأضاف المؤلف khurram, مصدر

عليك فقط تحديد الارتفاع وارتفاع الخط في section.sep h4  وتعمل بشكل جيد الآن وفقا لمتطلباتكم ..

<�القوي> CSS </قوي>

section.sep h4{
  background: url('http://i1200.photobucket.com/albums/bb328/tobeeornot/sec.png') no-repeat transparent;
  color:#fff;
  font-family:arial;
    font-size: 11px;
    font-weight: 400;
    height: 69px;
    letter-spacing: 1px;
    line-height: 50px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    width: 77px;

see the demo:- http://jsfiddle.net/JvnHn/7/

1
وأضاف
شكرا ولكن هذا ليس صحيحا سواء. لا أريد سوى نصف الجزء العلوي من الصورة لتغطية "صور" والنصف السفلي للصورة لتغطية "الخريطة".
وأضاف المؤلف tobeeornot, مصدر
يرجى الاطلاع على التعديل أعلاه لمعرفة الشكل النهائي للصورة النهائية.
وأضاف المؤلف tobeeornot, مصدر

Your CSS section.sep h3.top should be section.sep h4.top because you have used h4 in HTML instead of h3

HTML الخاص بك:

Pics


Map



1
وأضاف
شكرًا على التصحيح ولكن هذا لا يؤثر على الصورة.
وأضاف المؤلف tobeeornot, مصدر
مرحبًا ، شكرًا على هذا ولكني أريد أن يبقى الجزء العلوي من الصورة بهذه الطريقة وأن ينقلب النصف السفلي رأسيًا ليعكس الجزء السفلي من الصورة.
وأضاف المؤلف tobeeornot, مصدر
يرجى الاطلاع على التعديل أعلاه لمعرفة الشكل النهائي للصورة النهائية.
وأضاف المؤلف tobeeornot, مصدر
شاهد هذا العرض التوضيحي: jsfiddle.net/rathoreahsan/JvnHn/6 بعض التغييرات في ترميز css
وأضاف المؤلف Ahsan Rathod, مصدر