냐하하
540
2020-02-17 19:03:42 작성 2020-02-18 11:17:12 수정됨
5
168

vuetify에서 css 질문 드립니다.


vuetify를 이용해서 사이트를 만들어보고 있는데요.


사용한 무료 이미지에 blur를 먹이고 그 위에 글자를 표현하려고 합니다.

그래서 scss 모듈을 설치하고 style을 적용했는데요.


이미지에 해당되는 v-img 태그가 텍스트를 포함해야 이미지 위에 글이 올라가는 형태인지라...

blur가 텍스트에까지 영향을 주는데 이걸 어케 해결해야할지 모르겠네요...

요런식으로 흰 글씨까지 어두워집니다..


아래는 코드입니다!!

<template>
    <section>
			<v-img id="bg" src="@/assets/images/containerPort.jpg" height="840">
				<v-layout column align-center justify-center class="white--text" fill-height>
					// 로고 이미지 <img src="@/assets/images/vuetify.png" alt="Vuetify.js" height="200">
					<h1 class="white--text font-weight-bold mb-2 display-2 text-center">xxxx</h1>
					<div class="subheading mb-4 text-center">yyyy</div>
				</v-layout>
			</v-img>
		</section>
</template>

<style lang="scss">
	#bg{
		// 이미지가 로고와 텍스트 포함해서 어두워짐
		filter: brightness(50%);
	}
</style>


0
0
  • 답변 5

  • 훅인더훅
    430
    2020-02-17 19:44:57

    v-img 에 css를 적용하지 마시고 그 내부에 img 태그에 적용해 보시는 게 어떨까요?

    v-img는 텍스트까지 모두 포함되었을 거 같은데요

    0
  • 냐하하
    540
    2020-02-18 11:16:41

    404 not found

    img 태그는 위의 로고에 해당되는 이미지입니다.

    구조가 v-img 태그 위에 '로고 이미지+텍스트 2줄'이 올라간 상태입니다.

    v-img가 배경 그림이 되는거라 그 태그 안에 넣는건 맞는데... 배경 그림에만 css를 넣는게 안되는 상황이에요... ㅠㅠ


    0
  • Eggplantiny
    162
    2020-02-18 16:06:01

    이미지 영역 위에 width와 height가 같은 영역을 만들고 wrap 해버리는 방법으로 구현하면 어떨까요?

    0
  • 냐하하
    540
    2020-02-19 11:17:13

    Eggplantiny

    아공 쉽지가 않네요 ㅠㅠ 같은 영역을 만든다는것도 잘 모르겠어요...원체 초보인지라...

    0
  • Eggplantiny
    162
    2020-02-19 11:30:45 작성 2020-02-19 12:40:07 수정됨

    v-img 와 text 영역을 하나로 합치는 div를 만드세요

    그리고 text 영역은 position 을 absolute로 만들고 width와 height를 v-img 와 똑같이 만든 후에 text 영역의 z-index 를 조정하시면 될겁니다.


    https://codepen.io/sigran0/pen/yLNJQeZ


    위의 소스코드를 참조하시면 될것 같습니다.

    그리고 한가지 덧붙이자면 순수 Vuetify 로만 개발하는것은 굉장히 힘들겁니다.

    Vuetify 는 grid 시스템과 Component 부분정도만 가져오시고


    나머지 원하는 부분은 직접 CSS로 개발하시는것을 추천드립니다.

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.