2019-11-09

Brandon

눈에 띄는 배너 제작에 필요한 CSS 예제

[vc_row type="full_width_background" full_screen_row_position="middle" scene_position="center" text_color="dark" text_align="left" top_padding="5%" bottom_padding="13%" id="team" overlay_strength="0.3" shape_divider_position="bottom" bg_image_animation="none" shape_type=""][vc_column column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" background_hover_color_opacity="1" column_link_target="_self" column_shadow="none" column_border_radius="none" width="1/1" tablet_width_inherit="default" tablet_text_alignment="default" phone_text_alignment="default" column_border_width="none" column_border_style="solid" bg_image_animation="none"][vc_column_text]Overlay the image

.darken {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(YOUR IMAGE HERE);
}

Example: http://jsfiddle.net/drpak8vy/1/

Put text in a box

.text-box {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
display: inline;
padding: 10px;
}

Example: http://jsfiddle.net/qg83m36p/

Floor fade

.floor-fade {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6) ), url(YOUR IMAGE HERE);
}

Example: http://jsfiddle.net/gRzPF/409/[/vc_column_text][/vc_column][/vc_row]