Jak to osiągnąć bez korzystania z edytora zdjęć?

mogę zmienić:Jak to osiągnąć bez korzystania z edytora zdjęć?

do:

bez korzystania z edytora zdjęć

Tutaj jest CSS i HTML kod
nie mogę przesłać logo bo powinien mieć co najmniej 10 reputacji opublikować więcej niż 2 linki więc może wstawić go w innym komentarzu

header { 
 
    background-color: rgba(255, 255, 255, 0.9); 
 
    height: 50px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    position: fixed; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
} 
 

 
header .logo { 
 
    position: fixed; 
 
    left: 50%; 
 
    top: 13px; 
 
    display: inline-block; 
 
} 
 

 
.background-image { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 1; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #fff url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg/800px-%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg') no-repeat center center; 
 
    background-size: 100%; 
 
}

<body> 
 
    <header> 
 
    <div class="header-section logo"> 
 
     <a href="/"> 
 
     <img src="http://i.imgur.com/IB1gfZB.png" alt="..."> 
 
     </a> 
 
    </div> 
 
    </header> 
 
    <div class="background-image"></div> 
 
</body>

Źródło

2017-07-10 sam michail

Prześlij zdjęcie do Imgur lub jakąś aplikację, udostępnianie zdjęć i użyj tego linku obrazu w kodzie tutaj demo. –

W urywku nic nie widać. Popraw "URL" w CSS. –

Oto logo http://imgur.com/a/nCh91 –

Można użyć opacity, aby utworzyć półprzezroczysty obraz, a możesz to naprawić, dostosowując go do potrzebnych elementów.

Ale jeśli chcesz również zmienić kolor obrazu na ciemniejszy, możesz użyć filtrów CSS. Możesz zmienić kolor na ciemniejszy/bordowy/brązowy. Warto zwrócić uwagę na wsparcie przeglądarek - https://caniuse.com/#feat=css-filters

header { 
 
    background-color: rgba(255, 255, 255, 0.9); 
 
    height: 50px; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    position: fixed; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 2; 
 
} 
 

 
header .logo { 
 
    position: fixed; 
 
    left: 50%; 
 
    top: 13px; 
 
    max-width: 100%; 
 
opacity: .7; 
 
position: absolute; 
 
top: 0; left: 0; 
 
-webkit-filter: hue-rotate(45deg); 
 
filter: hue-rotate(45deg); 
 
} 
 

 
.background-image { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 1; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #fff url(http://environment.umn.edu/wp-content/uploads/2016/04/global_landscapes_initiative_directory_pages.jpg) no-repeat center center; 
 
}

<body> 
 
    <header> 
 
    <div class="header-section logo"> 
 
     <a href="/"> 
 
     <img src="http://i.imgur.com/IB1gfZB.png" alt="..."> 
 
     </a> 
 
    </div> 
 
    </header> 
 
    <div class="background-image"></div> 
 
</body>

Źródło

2017-07-10 23:16:15

@showdev nie wiesz co masz na myśli? Wygląda na to, że zmiana, którą próbują wprowadzić, to krycie ~ 70% i trochę ciemniejsze lub brązowawe niż oryginalny obraz. –

Uzgodnione. Zakładałem, że biały tekst był częścią logo. Ale PO wyjaśnił, że logo składa się tylko z trzech czerwonych pasków. – showdev

wygląda rzeczą raz - czyli bycie logo i wszystko - to jest po prostu dużo łatwiej zrobić coś takiego z Photoshop.

Poddałem się pod głosowanie Michael's answer, ponieważ uważam, że jest tak blisko, jak tylko można uzyskać z samym CSS. Chyba że jest jakiś "hakowaty" sposób na zrobienie tego.

Moja metoda:

Korzystanie Photoshop.

Następnie dodać zdjęcie jako obraz tła z jednego z pseudo-elementy do nagłówka div/img

stworzyłem próbki poniżej oczekiwanego efektu końcowego.

Zakodowałem obraz nakładki jako Base64, ponieważ ma on tylko rozmiar 1kb. Należy to sprawdzić przy pomocy pliku CSS. Więcej informacji o Base64

Możesz kontrolować opacity pseudoelementu.

.content { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 500px; 
 
    position: relative; 
 
    background: url(https://unsplash.it/800/310) no-repeat 
 
} 
 

 
.content::before { 
 
    content: ""; 
 
    display: block; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    opacity: .25; 
 
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3AAAAExCAMAAAAKr7AFAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAP///v///v///yYLV3kAAAADdFJOUwB6xLOvUwsAAAN0SURBVHja7d3BroMgEEBRBv7/n7vsRqGMSGo8Zzs7zY0vhOkrDdimeAQgOBAcIDgQHCA4EBwIDhAcCA4QHAgOBAcIDgQHCA4EBwgOBAeCAwQHggMEB4IDwQGCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcCA4QHAgOEBwIDhAcCA4EBwgOBAcIDgQHggMEB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCC4J6pxYjiM3hDBcSTKsRgOT2aleqiCQ3CCQ3AITnCCExx3vadOUzU1FJzgmA6u9poafv0QHFPBNcEJDsEhOMEJTnD8JDJNCU5wrP3AxbUhgmP2L8oLQwSH4ASH4BDca9T0IWUVnOCY1T2HLOkhgmMmuPHtZDcpBYfgBIfgEByCExyb5RfeQnCCY1lww6GblIJDcIJDcAgOwQmO3fLbcJZzBMf8S0of/DukFBzLgrs4RHAITnAIDsG9Rk2fmYTgBMcs23CC4w+Cy19d9kwFh+AEh+AQnOAEJzhukl94c0gpONYFN/z6ubosOAQnOASH4BCc4Nj+itILb7bhBMey4IZD/1dAcAhOcAgOwSE4wbHb+l8Q8s4Fx/QHzjac4NgYXP4nuzxTwSE4wSE4BCc4wQmOm+S24VqzDSc4VgbXa8rVZcEhOAQnOATHVwhOcGx8QdltuGobTnAsC244dHVZcAhOcAgOwSE4wfGIMxPLOYIDBAeCA8EBggPBAYIDwYHgAMGB4ADBgeBAcIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHAgOEBwIDhAcCA4EBwgOBAcIDgQHCA4EB4IDBAeCAwQHggPBAYIDwQGCA8GB4ADBgeAAwYHgAMGB4EBwgOBAcIDgQHAgOEBwIDhAcCA4QHAgOBAcIDgQHCA4EBwIDhAcCA4QHAgOEBwIDgQHCA4EBwgOBAeCAwQHggMEB4IDwXkEIDgQHCA4EBwgOBAcCA4QHAgOEBwIDgQHCA4EBwgOBAcIDgQHggMEB4IDBAeCA8EBggPBAYIDwQGCA8GB4ADBgeAAwYHgQHCA4EBwgOBAcIDgQHAgOEBwIDjgwAeC1hN7ntJexAAAAABJRU5ErkJggg==') 
 
}

<div class="content"></div>

Źródło

2017-07-10 23:49:47

Jak to osiągnąć bez korzystania z edytora zdjęć?

Odpowiedz

Powiązane problemy