CSS Аясыныңмөлдірлігі. CSS бар Мөлдір фон немесе мәтін

Веб-дизайнерлер көптеген жолдармен жұмыс CSS3 пайда оңай және одан қисынды айналды бар: барлық кейін, сіз қазір шынымен икемді кем жиі JavaScript жүгінбей, кез келген нысанды баптай аласыз. Сіз фонның ашықтығын реттеу үшін қажет делік - CSS бірден бірнеше опцияны ұсынады.

атрибуттар жиынтығы анықталады Фонды (фондық-сурет, фон-позиция , фон-өлшемді, фон-қайталаңыз, фон-тіркеме, фон-тегіне, фон-клип, өң-түсі), төлсипат бойынша бөлек тағайындалған немесе аралас болуы мүмкін, олардың әрқайсысы фон. АҚШ егжей-тегжейлі олардың әрқайсысы қарастырайық.

өң-түсін Атрибут

CSS жылы өң түсі бірнеше жолмен орнатуға болады: а алтылық кодын, түсі атауы немесе RGB-жазбаны пайдаланып. CSS3 жылы RGBA бар RGB-жазу опциясы орнына пайдалануға мүмкін болды.

өң-түсі: # FFDAB9 Hex түс коды торда кейін меншік жазылады. Осы тармақта таңбалар бірдей жұп болса, код әдетте аз кесілген болып табылады: # ccff00 # CF0 ретінде жазуға болады:

дене {өң-түсі: # CF0 ;}.

аты тіпті ең экзотикалық түстермен болып табылады. Мысалы, стандартты қызыл және ақ қосымша Сіз NavajoWhite (#FFDEAD) немесе Honeydew2 (# E0EEE0) пайдалана аласыз:

дене {өң-түсі: күлгін; }.

соңғы опция RGB немесе RGBA жазба сіз түсін, сонымен қатар CSS фонның ашықтығын ғана емес көрсетуге мүмкіндік береді, бірақ әдіс тек 9 асқан IE нұсқаларында жұмыс істейді. Басқа браузерлер ашықтық қалыпты нұсқасы мойындайды. W3C стандарттарға сәйкес, бұл орнына көп әдеттегі RGB әлі RGBA пайдалануға жақсырақ.

RGBA фонда соңғы мәні мен 1 (жабық) үшін (мөлдір) 0-ден ашықтығы орнатады.

Кейбір ерекше маңызы бар. өң түсі HSL және HSLA пайдаланып орнатуға болады. Екі CSS3 қосылды, сондықтан IE нұсқасы 9 немесе одан жоғары қолдау көрсетілмейді. тек түрлі форматта жүзеге асыру нұсқалары бірдей RGB немесе RGBA: Hue (көлеңке - Түс шеңберіндегі құны, градус келтірілген), қанықтыру (қанықтыру - 0-ден 100-ге дейін пайызбен түсті қарқындылығы,), Lightness (жеңілдігі - жарықтық, өлшенген Сол сияқты қанықтыру параметр ).

Фондық-суретті Атрибут

мөлдір фон ең кросс-браузер нұсқасы - бұл кескіннің пайдалану болып табылады. Егер сіз одан да суреттерді орнатуға болады CSS3 жылы, бұл үтір арқылы жасалады. мысал:

{Фондық-дене сурет: URL (bg1.png), URL (bg2.png)}.

тіпті IE8 қолдау Бұл жолы. орналасуында пайдаланылатын резеңке фонда бірнеше суреттер. Маңыздысы сол, пайдаланушылар ғана кескінді жүктеуге болады, себебі кез-келген суретті пайдалануға және CSS фон түсін орнату үшін ұмытпаңыз.

өң-орын атрибутының

Сіз фондық бірлігін орнату үшін суретті пайдалансаңыз, CSS сіз кез келген жерде Экрандағы суретті орналастыру үшін мүмкіндік береді. Әдепкіде, сурет сол жақ жоғарғы бұрышында орналасқан. Атрибут ауызша нұсқаулар (жоғарғы, төменгі, оң, сол), сандық (қызығушылық, пиксель және басқа да бірлік), не алады. Бұл жағдайда, сіз көлденең және тік екі құндылықтарды, көрсетуіңіз керек:

дене {фондық-позиция: оң орталығы ;} - осы мысалда, үлгі беттің оң жағында орналасқан болады, сол үшін сурет қашықтықта жоғарғы және төменгі.

өң-өлшемін Атрибут

Кейде CSS фонды созып немесе оның өлшемін азайту үшін қажет. Бұл әрекетті орындау үшін, атрибут фондық-өлшемін пайдалану, және фондық мөлшері пиксель немесе пайыз, және кез келген басқа да бөлімшелерінде орнатуға болады.

пайдаланылуы тиіс браузер префикс бұрынғы нұсқаларында өң дұрыс көрсету үшін: Бұл атрибут, кейбір проблемалар бар. Әрине, қазіргі нұсқасы толық, бұл атрибут қолдайды және нақты қасиеттері қажеттілігі жоғалып кетті.

өң-қосымшаны Атрибут

айналдыру, ал Бұл төлсипат фондық суреттер әрекетін көрсетеді. Сондықтан, ол (унаследует оның ішінде емес, осы мақалада талқыланған барлық атрибуттары үшін жалпы) 3 мәндерін қабылдай алады:

• тіркелген - тіркелген фонында суретке етеді;
• жылжыңыз - элементтердің қалған фон шиыршықтар;
• жергілікті - айналдыру мазмұн бар болса фонында сурет сарп қыл-. жақтау мазмұнының шеңберінен шықпайтын Фонды бекітіледі.

пайдалану Мысал:

дене {тіркелген фондық-тіркеме}.

Қазіргі уақытта, Firefox (жергілікті) соңғы меншік қолдамайды.

өң-шығу Атрибут

Бұл атрибут позициялау элементі үшін жауапты болып табылады. Ерте браузерлер префикс пайдалануды талап етеді. меншік өзі үш параметрлері бар:

• назарға кадрдың қалыңдығын ескере отырып, ал бетін аралас-қорап, Edge үлгі қатысты орналасқан;
• алдыңғы айырмашылығы шекара-қорап қасиеттері шекара желісі толық болуы немесе ішінара үлгісін жабатын болады бұл;
• Мазмұн-қорап позициялау сурет оның мазмұнын pryavyazyvaya.

Егер бірнеше мәндерді анықтау болса, онда браузерлер өз жолмен әрекет болады: Firefox және Opera тек бірінші параметрді қабылдайды.

өң-қайталауды Атрибут

Фондық сурет көрсетілген жағдайда, әдетте, ол көлденең немесе тігінен қайталау керек. Бұл үшін мен атрибут фондық-қайталауды пайдаланылады. Осылайша, блок фон, осындай мүлікті қамтиды CSS бірнеше параметрлердің біреуін болуы мүмкін:

• жоқ-қайталау - сурет бір нұсқасында бетте пайда;
• қайталау - фондық х және у қайталанады;
• қайталау-X - тек көлденең;
• қайталау-у - тек тігінен;
• кеңістік - фондық қайталанады, бірақ ғарыш суреттердің арасында толтыру мүмкін емес, егер бос пайда болып;
• дөңгелек - ол бүкіл суреттер бүкіл аймағын толтыру емес, егер сурет, масштабируется.

атрибуттардың Мысал:

дене {фондық-қайталау: қатесі қайталау қайталау} - ұқсас фон-қайталау: қайталау-у.

үтірлермен бөлінген параметрлерін, листинг кезінде CSS3 бірнеше суреттер үшін мәндерді көрсету мүмкін.

өң-клип Атрибут

Бұл атрибут (мысалы, пунктирлі аясында жағдайда) шекарасын бойынша фондық әрекетін анықтайды:

• қаптауын-қорап - блогында ішкі көрсетіледі өң;
• шекара-қорап - сурет шеңберінде келеді;
• мазмұны-қорап - фонда сурет тек мазмұны ішінде пайда болады.

пайдалану Мысал:

дене {фондық-клип: content- қорап;}.

Chrom және Safari -webkit- префикс қажет.

Мөлдірлік атрибуттары және сүзгі

Келеміз атрибуты сіз фонның ашықтығын орнатуға мүмкіндік береді - CSS меншік барлық браузерлерде жұмыс істейтін болады. мәні 0,0 Инклюзивті 1,0 диапазонында орнатылады. Бұл жағдайда, сіз CSS фонда ашықтығын орнатуға болады орнына 0,3 жоқ бүтін сан мәні .3 жазу жеткілікті:

.block {фондық-сурет: URL ( img.png); Келеміз: .3;}.

өң ашықтығы орнату үшін, CSS сүзгі төлсипатты пайдалану, тіпті тоғызыншы нұсқасы төменде ЖК үшін жарамды болып табылады:

.block {фондық-сурет: URL ( img.png); сүзгі: альфа (Келеміз = 30)}.

ашықтығы пайдаланып фон, сонымен қатар құрылғының ішіндегі барлық элементтері ғана емес, айқын болғанда: Бұл жағдайда, Келеміз мән Келеміз RGBA мұрагерлік арқылы әр түрлі ашықтығы параметрлерін атрибут деп 0 мен 100 арасындағы Ескерту орнатылады.

Әрқашан ТМД браузерлердің және барлық басқа елдер үшін сіздің Пайдалану статистикасын бақылайды. барлық АКДС ең үлкен проблема - ЖК ескі нұсқалары, олар толық көлемде CSS3 пайдалануға мүмкіндік бермейді. орналасуда браузеріңіз кез келген CSS мүлікті қолдайтынын тексеріңіз арнайы қызметтерін пайдалану үшін ұмытпаңыз. Сіз браузерлердің ескі нұсқаларын орнату мүмкін емес болса, онда онлайн бірнеше браузерлерде сайт жұмысын тексереді қызмет табыңыз.