Позициониране и z-индекс в CSS
Поставяне на текст върху изображението.
Ако сте разбрали какво е какво в предишната статия, тогава всичко ще бъде много по-лесно за вас тук. И така нашата цел на този урок е да създадем общ блок, блок с изображение и блок с полупрозрачен фон, върху който ще насложим текста. Всъщност това не е много лош ефект и е привлекателен.
Сега нека създадем основния блок. По принцип можете да използвате блока от предишния урок, но аз исках да го направя малко по-висок, така че нека създадем нов.
Всичко също, само номерът се е променил. Същото е и с правилата за блокове, просто ги копирайте от първата част и променете височината на 100 px.
Сега, вътре в блока "basic-layer2", нека създадем още два. Едната с изображение, а другата за текст.
Като цяло в HTML имаме всичко готово, да отидем на CSS. Нека веднага да създадем правилата за слоя на изображението.
Абсолютно позициониране, ширина, височина и подплата. Изглежда нищо особено. Сега да се върнем към блока с бъдещия текст и да напишем неговите условия за показване.
Основното тук е следното. Височината на блока е наполовина по-малка, горното поле, полупрозрачният фон и цветът за теста също са увеличени. Разбира се, по-добре е да обвием самия текст в параграфи и да добавим свои собствени правила за него, например, така.
Сега можем, защо да не пишем и да погледнем в браузъра.
Снимка №1.
