- This topic is empty.
-
AuthorPosts
-
December 14, 2016 at 10:25 am #248992rmasperoParticipant
So I’ve been using Chris’s article https://css-tricks.com/multi-line-padded-text/ to help me get some centred text with a background. The only problem is I want the background to be semi transparent and I can’t think of a way of doing it. I’ve played with line height and padding but can’t come up with a solution.
Here is a photo of what I’ve got: https://dl.dropboxusercontent.com/u/386211/Screen%20Shot%202016-12-14%20at%205.19.54%20pm.png
What I want to do is stop the backgrounds of each line overlapping but ensure that the space between each line is the same.
My code can be found on Code Pen: http://codepen.io/rmaspero/pen/VmVwNx
December 14, 2016 at 10:13 pm #249043I.m.learningParticipantHow’s this look for you?
h2 {
background-color: white;
opacity:.5;
display: inline;
}Change the opacity to whatever your liking.
****You forgot to close the .comp–hero-text CSS with a “}” ***
.comp–hero-text {
align-self: center;
margin: 0 auto;
max-width: $max-width – 200px;
text-align: center;
width: 80%;} <–December 14, 2016 at 11:38 pm #249044BeverleyhParticipantWhat I want to do is stop the backgrounds of each line overlapping but ensure that the space between each line is the same.
The part in bold is a bit ambiguous;
- for the same vertical spacing between lines of text as is currently present, but with reduced height white highlights, reduce the top and bottom padding.
- for the same height white highlights as is currently present, but with further apart vertically spaced text, increase line-height.
But then…
I’ve played with line height and padding but can’t come up with a solution.
So I’m not sure where that fits in or what the picture illustrates.
If the pic illustrates what you want to achieve, i have to say that it already looks very much like the demo – with semi-transparent white background to the text (what I’ve called highlights above) and white overlap, but not so much to obscure text.
Can you clarify what it is you need help with exactly please.
December 15, 2016 at 2:27 am #249049rmasperoParticipantSorry I didn’t make it very clear, the image is the issue.
From what I’ve found I can’t stop the semitransparent overlaps and have equal padding around each line. In that when you add padding it adds it to the top and bottom of each line. For example if you add 5px then on the first line you have 5px on top then 5px on the bottom but then there is another 5px on the top of the second line. The ideal situation would be to have 5px between each line.
December 15, 2016 at 2:27 am #249050rmasperoParticipantI’m using SCSS so the bracket is at the bottom of the enclosed styles
December 15, 2016 at 2:36 am #249051ShikkedielParticipantYou may have to adjust the
box-shadow
butbackground-clip: content-box
could be the property to help out there. Writing that while having only superficially read the topic… -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.