Sololearn CSS course Gradients & Backgrounds answers

Here are all the questions and answers that I hope will help you learn CSS course.

Other course answers

Sololearn CSS course The Basics answers
Sololearn CSS course Working with Text answers
Sololearn CSS course Properties answers
Sololearn CSS course Positioning and Layout answers
Sololearn CSS course CSS3 Basics answers
Sololearn CSS course Transitions & Transforms answers
Sololearn CSS course CSS Filters answers

56.1 Lesson

Linear Gradients

Question:

Creating Linear Gradients
What types of color values can NOT be used within the linear gradient property?

Answer:

CMYK

Question:

Color Stops
Add the missing color stop value to create sharp lines between the colors.

Answer:

background: linear-gradient (red 20%, green 20%, green 80%, blue 80%);

Question:

Direction of the Gradient
Which one of the following directions is not supported for the linear-gradient?

Answer:

Center

Question:

Angle of the Gradient
linear-gradient (left, red, yellow);
Which one of the following choices is equivalent to the example above?

Answer:

linear-gradient(0deg, red, yellow);

Question:

Repeating a Linear-Gradient
Which property is correct for creating a repeating gradient?

Answer:

repeating-linear-gradient

57.1 Lesson

Radial Gradients

Question:

Radial Gradients
Select the correct parameters for radial gradient.

Answer:

Size
Position
Color-stops

Question:

Setting the Shapes
What is the default value for the "shape" parameter?

Answer:

Ellipse

Question:

Radial Gradient Position
Which choice is not an acceptable value for "position" parameter?

Answer:

Radian

Question:

Setting the Color Stops
Add a circular radial gradient to produce black and red colors, with color-stops accordingly at 20 pixels and 70 pixels.

Answer:

background: radial-gradient (circle, black 20px, red 70px);

58.1 Lesson

background-size

Question:

The background-size Property
Resize the background image to a height of 100 pixels and a width of 200 pixels.

Answer:

background-size: 200px 100px;

Question:

The background-size Values
Which property scales the image so that both width and height fit inside the content area?

Answer:

contain

59.1 Lesson

background-clip

Question:

The background-clip Property
Which value is not used with the background-clip property?

Answer:

text-box

Question:

background-clip with Images
Does background-clip work with images?

Answer:

Yes

60.1 Lesson

Transparent Borders

Question:

Transparent Borders with background-clip
Drag and drop from the options below to create transparent borders for an element.

Answer:

<style>
  .test {
    background-clip: padding-box;
    border: 20px solid rgba(0, 0, 0, 0.3);
  }
</style>

61.1 Lesson

Multiple Background Images

Question:

Multiple Backgrounds
The last image in the background-image list will appear at the ...

Answer:

Bottom

Question:

Multiple Backgrounds
Fill in the blanks to add two background images to the element, with the first positioned at the top left corner, and the other at the top right corner.

Answer:

<style>
  .test {
    background-image: url(1.jpg), url(2.jpg);
    background-repeat: no-repeat;
    background-position: left top, right top;
  }
</style>

63.1 Lesson

Module 6 Quiz

Question:

Add a circular radial gradient to produce red and blue, with color-stops accordingly at 15 pixels and 25 pixels.

Answer:

background: radial-gradient(50px 50px, red 15px, blue 25px);

Question:

In the background-clip property, which value allows for the creation of transparent borders?

Answer:

padding-box

Question:

Drag and drop from the options below to make the background image of the element 100 x 100 pixels in size. Also, set the opacity of the element to 50%:

Answer:

<style>
  #element {
    background-image: url('test.jpg');
    background-size: 100px 100px;
    opacity: 0.5;
  }
</style>

Question:

Drag and drop from the options below to apply 50% opacity to the div, and make it also work in IE:

Answer:

<style>
  div {
    opacity: 0.5;
    filter: alpha(opacity=50);
  }
</style>