CSS gjennomsiktig grense
I denne artikkelen vil vi lage en gjennomsiktig grense i CSS, og du vil se at objektet bak den gjennomsiktige grensen er synlig. Vi vil utforske de forskjellige eksemplene her for å gi deg en full forståelse av det gjennomsiktige grensekonseptet.
Eksempel nr. 1:
Åpne en ny fil i Visual Studio -koden. Når denne tomme filen åpnes, velg språket. Her oppretter vi en HTML -kode, så vi velger HTML -språket. Når vi velger dette språket, er filen som er opprettet her HTML -filen. Så når vi lagrer denne filen, trenger vi ikke å nevne filutvidelsen. Etter dette, skriver du de grunnleggende HTML -kodene eller sett "!”Og trykk deretter“ Enter ”. Du vil automatisk få alle de grunnleggende kodene som kreves for HTML.
Nå kobler vi denne filen til CSS -filen som er "gjennomsiktig.CSS ”. I kroppen bruker vi overskriftskoden først for å generere overskriften. Etter dette lager vi to div med navnene “indre” og “ytre”. Så, igjen, plasserer vi en overskrift som vises inne i den andre diven. Nå lukker vi disse divene her. Vi oppretter en gjennomsiktig grense her ved å bruke "grensen" -egenskapen i CSS og sette RGBA -fargen i denne grenseeiendommen.
Vi bruker den "maroon" fargen på overskriftene som vi tidligere har laget. "Ytre" er for å nevne den første div -klassen, og vi setter dens "bredde" til "300px". "Høyden" på denne første diven er "300px" og "marginen" her er "10%". Nå, etter alle disse egenskapene, setter vi "grensen" -egenskapen og setter verdien til RGBA -verdien. Vi setter også alfaverdien her for å gjøre grensen gjennomsiktig. Vi setter "grensen" til "10px" "bredde" og i "solid" type. RGBA vi satte her er “RGBA (0, 0, 0, .4) ”der“ RGB (0, 0, 0) ”brukes til svart. Men her tilfører vi en viss gjennomsiktighetsverdi som er “0.4 ”. "Border-Radius" er satt til "5px", så kantene på grensen er litt buet.
Nå nevner vi også det andre DIV -navnet her som "ytre". Og vi bruker noen egenskaper her for denne andre diven. Vi må sette størrelsen på denne andre diven mindre enn den første diven. Så vi setter sin "bredde" og "høyde" til "270px" for hver av dem. Dens "margin" er "auto" og "margin-top" er "3%". Vi setter "bakgrunnen" som "RGBA (0, 0, 0, 0.4) ”, det samme som den første divens grense. "Border-Radius" her er også "5px", og "polstring" vi bruker er også "5px".
Her kan du se at grensen er gjennomsiktig når vi bruker noen alfaverdier i rgba -verdien av grensen. Hvis vi plasserer noen gjenstander bak denne grensen, vil det være synlig for oss.
Eksempel 2:
Dette er vårt andre eksempel, og vi lager en tom div -beholder etter overskriften. Vi setter bildet i denne diven og bruker en gjennomsiktig grense på bildet ved å bruke CSS -egenskapene.
Vi setter "fargen" til "H1" som "maroon". Vi bruker "div" -beholderen her og setter sin "bredde" til "300px" og dens "høyde" til "300px". Vi bruker også "Float" her for å flyte denne diven for å "venstre". Vi setter "bakgrunnen" for denne diven og setter "mypicture.png ”som bakgrunnen for denne diven. Vi plasserer banen til dette bildet i "URL" og legger denne "URL" som verdien av "bakgrunn" -egenskapen. Vi bruker "margin" -egenskapen og setter den til "20px". "Polstringen" er også satt til "20px". For "grensen" bruker vi "bredde" -verdien til "25px" av "fast" -typen. Siden vi ønsker å skape en gjennomsiktig grense, må vi bruke "RGBA" -fargen her vi setter alfaverdien for å skape en gjennomsiktig grense. RGBA -fargeverdien er “RGBA (143, 9, 9, 0.5) ”. De tre første verdiene viser den røde typen farge, men her, 0.5 bruker en viss åpenhetseffekt på denne grensen. Nå, for hele "kroppen", setter vi "polstring" -egenskapsverdien til "90px".
Utgangen her inneholder et bilde. Du kan merke grensen rundt dette bildet. Denne grensen er gjennomsiktig da vi kan se bildet bak grensen. Ved hjørnene av bildet kan vi se at fargen på bildet blekner fordi vi har en gjennomsiktig grense rundt bildet.
Eksempel nr. 3:
I denne HTML lager vi igjen bare en div. Nå, ved hjelp av CSS -attributtene, plasserer vi bildet i denne diven og bruker en gjennomsiktig grense på det.
Først må vi plassere navnet på Div Container som vi satte i HTML -koden. Deretter legger vi de krøllete seler. Inne i disse krøllete seler plasserer vi "bakgrunnen" som setter bakgrunnen for denne diven. Vi setter bildet i "URL", og denne "URL" er her som verdien av "bakgrunn" -egenskapen til CSS. Vi bruker "grensen" og øker "bredden" på denne grensen i dette eksemplet. Vi setter dens "bredde" til "50px", og denne grensen er i "solid" form. Vi bruker "RGBA" her som vi diskuterte i vårt forrige eksempel. Vi setter verdien av alfa som “0.5 ”som representerer åpenheten i denne grensefargen. "Høyden" på denne "div.wrap "er" 300px "og" bredden "er" 500px ", så den vil virke rektangulær. "Margin" som vi satte her er "50px".
Se på følgende utgang og legg merke til grensen. Her kan du se at bildedelen som er til stede bak grensen er synlig for oss. Det betyr at denne grensen er gjennomsiktig. Vi kan lage denne gjennomsiktige grensen ved å sette alfaverdien i grensen til RGBA -fargen.
Konklusjon
Denne artikkelen presenteres her for å hjelpe deg med å forstå CSS -egenskapene som gjør oss i stand til å skape den gjennomsiktige grensen i CSS. Denne opplæringen har gått over dette emnet grundig. Vi viste de tre forskjellige eksemplene her der vi designet den gjennomsiktige grensen ved å bruke grenseeiendommen. Vi brukte også RGBA -verdiene i denne grenseegenskapen som ga muligheten til å sette alfaverdiene for å gjøre grensen vår gjennomsiktig. Vi definerte også denne "gjennomsiktige grensen", ettersom den er grensen som vi har sett gjenstanden bak den. I denne artikkelen inkluderte vi resultatene av alle disse kodene, og vi forklarte dem i full detaljer her. Jeg håper du kan lage denne "gjennomsiktige grensen" i prosjektene dine etter å ha følget denne artikkelen oppmerksomt etter denne artikkelen.